實現隨著滾動條滾動，導航會自動切換的效果

L6zt發表於2018-02-28

實現導航欄 跟隨滾動， 點選導航 頁面滾動到相應指定位置？
第一次寫部落格，還望指正不足：wo..菜鳥+1
簡單的思路是：
導航選單裡， 通過給元素指定 data-socrll-id 屬性， 來影射 內容區裡對應的 元素。
如 data-socrll-id=”page-a” 對應內容區的 元素 <div id=”page-a”></idv>。
然後根據 篩查 所有 data-sorcll-id 的的元素， 然後根據 這些元素 找到 對應的內容區。
通過監聽 window的滾動事件，通過滾動高度來判斷那個內容區在當前視口， 從而操作對應的 導航選單裡的狀態的轉換。 點選導航選單 觸發滾動， 與此相對應。
簡單的程式碼思路實現：
不知道是不是算自己的一個jquey 外掛（jq菜鳥）
優化效能：

  1. 增加節流函式
  2. 快取 $()元素物件
  3. 未完成 可以直接把內容元素資訊篩選一遍 放到陣列裡， 減少 對dom物件的訪問
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container div {
            height: 1000px;
            background: red;
            border-bottom: 1px solid #fff;
            font-size: 64px;
            line-height: 1000px;
            text-align: center;
        }
        .nav-list {
            position: fixed;
            width: 100%;
            left: 0;
            top: 80px;
            background: black;
            z-index: 999;
        }
        .nav-list a {
            float: left;
            width: 100px;
            padding: 20px 0;
            line-height: 1;
            text-align: center;
            color: white;
            text-decoration: none;
        }
        .nav-list a.active {
            color: red;
        }
    </style>
</head>
<body>
<div class="special-box-con">
<div class="nav-list">
    <a href="javascript: void(0)" class="nav-scroll" data-socrll-id="page-a">a</a>
    <a href="javascript: void(0)" class="nav-scroll" data-socrll-id="page-b">b</a>
    <a href="javascript: void(0)" class="nav-scroll" data-socrll-id="page-c">c</a>
    <a href="javascript: void(0)" class="nav-scroll" data-socrll-id="page-d">d</a>
</div>
    <div class="container">
       <div id="page-a">
           a
       </div>
        <div id="page-b">
            b
        </div>
        <div id="page-c">
            c
        </div>
        <div id="page-d">
            d
        </div>
    </div>
</div>
<script src="./js/jquery-2.0.0.min.js"></script>
<script class="special-plugins">
    $.fn.extend({
        navMapScroll (active, dataArt) {
            // 快取jquey 查詢的元素， 或類名
            var pageEqClass = {}
            var navEqClass = {}
            var pageList = []
            var navElems = $(this).find(`[`+dataArt+`]`)
            //節流函式
            var thrFn  = function (fn, time, maxLog) {
                var timeK = null
                var oTime = new Date().getTime()
                var execFn = function () {
                    fn()
                    oTime = new Date().getTime()
                }
                return function () {
                    var nTime = new Date().getTime()
                    clearTimeout(timeK)
                    if (nTime - oTime > maxLog) {
                        execFn()
                    } else {
                        timeK = setTimeout(execFn, time)
                    }
                }
            }
            var fn = thrFn(function () {
                 // 判斷哪裡內容區，在當前視口。對相應的導航進行相應的操作。
                let scrollTop = window.pageYOffset || window.document.documentElement.scrollTop
                for (var k in pageEqClass) {
                    var elem = pageEqClass[k]
                    var offsetTop = elem.offset().top
                    var elemH = elem.outerHeight()
                    if (offsetTop - scrollTop <= 0 &&  offsetTop + elemH - scrollTop > 0) {
                        navEqClass[k].addClass(active)
                    } else {
                        navEqClass[k].removeClass(active)
                    }
                }
            }, 50, 200)
            // 篩查元素
            navElems.each(function () {
                const $elem = $(this)
                const className = $elem.attr(dataArt)
                const elem = $(`#` + className)
                pageList.push(elem)
                pageEqClass[className] = elem
                navEqClass[className] = $elem
            })
            
            $(window).on(`scroll`, fn)
            navElems.on(`click`, function () {
                // 點選選單 滾動到對應的內容區。
                var className = $(this).attr(dataArt)
                $(window).scrollTop(pageEqClass[className].offset().top)
            })
            fn()
            return this
        }
    })
</script>
<script>
    $(`.nav-list`).navMapScroll(`active`, `data-socrll-id`)
</script>
</body>
</html

demo測試地址

相關文章