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

時間 2019-11-06

標籤實現隨着滾動條滾動導航自動切換效果简体版

原文原文鏈接

實現導航欄跟隨滾動，點擊導航頁面滾動到相應指定位置？
第一次寫博客，還望指正不足：wo..菜鳥+1
簡單的思路是：
導航菜單裏，經過給元素指定 data-socrll-id 屬性，來影射內容區裏對應的元素。
如 data-socrll-id="page-a" 對應內容區的元素 <div id="page-a"></idv>。
而後根據篩查全部 data-sorcll-id 的的元素，而後根據這些元素找到對應的內容區。
經過監聽 window的滾動事件，經過滾動高度來判斷那個內容區在當前視口，從而操做對應的導航菜單裏的狀態的轉換。點擊導航菜單觸發滾動，與此相對應。
簡單的代碼思路實現：
不知道是否是算本身的一個jquey 插件（jq菜鳥）
優化性能：javascript

增長節流函數
緩存 $()元素對象
未完成能夠直接把內容元素信息篩選一遍放到數組裏，減小對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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。