导航随页面滚动切换

<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;
                    if(scrollTop == 0 ){
                        $('nav a').removeClass('active');
                        $('nav a:first').addClass('active');
                    }else{
                        for (var k in pageEqClass) {
                            var elem = pageEqClass[k]
                            var offsetTop = elem.offset().top
                            var elemH = elem.outerHeight()
                            //offsetTop - scrollTop （元素距离顶部的距离） //offsetTop + elemH - scrollTop（是否还在可视区）
                            if (offsetTop - scrollTop <= 80 &&  offsetTop + elemH - scrollTop > 300) {
                                $('nav a').removeClass('active');
                                navEqClass[k].addClass(active);
                                break;
                            }
                        }
                    }        
                }, 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);
                    var top = pageEqClass[className].offset().top-50;
                    window.scrollTop = top;
                    window.scrollTo({
                        top:top,
                    });
                })
                fn()
                return this
            }
        })
    </script>

使用

     $('nav').navMapScroll('active', 'data-socrll-id');
    /**data-socrll-id唯一标识**/