<!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