<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

</head>

<style>

    /*菜单容器样式,设置水平垂直居中,方便点击*/

    .menu {

        position: fixed;

        width: 200px;

        height: 200px;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }

    /*菜单样式*/

    [href] {

        display: inline-block;

        width: 40px;

    }

    /*内容的样式*/

    [name] {

        display: block;

        width: 300px;

        height: 400px;

        border-top: 5px solid salmon;

    }

    /*菜单高亮的样式*/

    .active {

        font-size: 32px;

        background-color: chartreuse;

    }

</style>

<body>

    <!--内容容器-->

    <div class="content"></div>

    <!--菜单容器-->

    <div class="menu"></div>

</body>

</html>

<script>

    //初始化选择器,将获取到的element数组转化为数组对象

    function $(selector) {

        return Array.prototype.slice.call(document.querySelectorAll(selector)) //支持css3的选择器

    }

    //创建内容和菜单的DOM

    function createDom(attr) {

        var html = '';

        var temp = attr == 'href' ? '#' : '';

        for (var i = 1; i < 10; i++) {

            html += '<a ' + attr + '="' + (temp + i) + '">' + i + '</a>';

        }

        return html;

    }

    $('.content')[0].innerHTML = createDom('name')

    $('.menu')[0].innerHTML = createDom('href')

    //获取内容的偏移量(相对于浏览器顶部)

    var nameOffsets = $('[name]').map(function (v) {

        return v.offsetTop

    });

    //

    var timer;

    window.onscroll = function (e) {

        if(timer){

          clearTimeout(timer)

        }

        timer = setTimeout(function(){

          addLiScroll();

          timer = undefined;

        },200)

    }

    //滚动防抖

    function addLiScroll(){

      //获取当前页面相对于浏览器顶部的偏移量

      var pageOffset = window.pageYOffset;

      var abs = Math.abs; //获取绝对值函数

      //查找离当前浏览器顶部的偏移量最近的菜单锚点.

      var nearHash = nameOffsets.reduce(function (a, b) {

          return abs(a - pageOffset) > abs(b - pageOffset) ? b : a;

      })

      //获取菜单锚点

      var index = nameOffsets.indexOf(nearHash);

      //给菜单锚点添加 .active ,移除其他菜单元素的.active

      $('.active').forEach(function (v) {

          v.className = ''

      })

      $('[href]')[index].className = 'active'

    }

</script>

上面只是一个better-scroll基本的功能;

 git上是我仿饿了么实现购物的一些基本功能，也是下载即用　https://github.com/a653398363/moblieShopping

原生js 实现better-scroll效果,饿了么菜单内容联动，即粘即用的更多相关文章

  1. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  2. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  3. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  4. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  5. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  6. 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

  7. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

  8. 原生JS编写的照片墙效果实例演示特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 原生js实现雪花飘落效果

    雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花:2.把每一个雪花作为参数传进动态下落的方法中即可. <style> *{padding: 0;marg ...

随机推荐

  1. 生产者消费者模型Java实现

    生产者消费者模型 生产者消费者模型可以描述为: ①生产者持续生产,直到仓库放满产品,则停止生产进入等待状态:仓库不满后继续生产: ②消费者持续消费,直到仓库空,则停止消费进入等待状态:仓库不空后,继续 ...

  2. Android分区解释

    让我们从Android手机和平板电脑的标准内存分区列表开始.分区有:/boot/system/recovery/data/cache/misc 此外,有SD卡的分区./sdcard/sd-ext 请注 ...

  3. C# 获取Windows 设备信息

    namespace Beisen.Native { using Beisen.Pdf; using System; using System.Runtime.InteropServices; inte ...

  4. 004 JpaRepository，CrudRepository，PagingAndSortingRepository的区别

    很多程序都在使用,CrudRepository或者PagingAndSortingRepository,但是以前自己的程序使用的是JpaRepository,然后查了一下材料,记录一下. 1.类图 2 ...

  5. linux命令实现音频格式转换和拼接

    安装FFmpeg flaceric@ray:~$ sudo apt install FFmpeg flac 安装lame faaceric@ray:~$ sudo apt install lame f ...

  6. colock

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  7. leetcode 139. Word Break 、140. Word Break II

    139. Word Break 字符串能否通过划分成词典中的一个或多个单词. 使用动态规划,dp[i]表示当前以第i个位置(在字符串中实际上是i-1)结尾的字符串能否划分成词典中的单词. j表示的是以 ...

  8. Flutter ExpansionPanel 可展开的收缩控件

    文档:https://api.flutter.dev/flutter/material/ExpansionPanel-class.html demo: import 'package:flutter/ ...

  9. openresty开发系列11--openresty的api入门

    openresty开发系列11--openresty的api入门 1)ngx_lua模块的hello world编辑nginx下conf配置文件nginx.conf# vi nginx.conf在se ...

  10. shell编程系列25--shell操作数据库实战之备份MySQL数据，并通过FTP将其传输到远端主机

    shell编程系列25--shell操作数据库实战之备份MySQL数据,并通过FTP将其传输到远端主机 备份mysql中的库或者表 mysqldump 常用参数详解: -u 用户名 -p 密码 -h ...