原生js 實現better-scroll效果,餓了麼菜單內容聯動，即粘即用

時間 2019-12-06

標籤原生實現 better scroll 效果餓了菜單內容聯動即用欄目 JavaScript 简体版

原文原文鏈接

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