Question

我将多个事件绑定到滚动事件，当我尝试使用window.location.hash =＆＃34; hash＆＃34 ;;更新哈希时，我遇到了性能问题。。屏幕闪烁，页面随机跳转。 如何优化此代码以提高性能并防止页面上的闪烁和跳跃？

我正在使用下面自定义编写的jQuery滚动事件，当您滚动一定距离时，我会更新页面的各个部分（我已经为这些部分中的每一部分创建了变量，这是一个总和使用.outerHeight的部分中的所有div。所有内容都包含在$（window）.on（＆＃39; load resize＆＃39;，function（）{}中，以确保在计算高度之前窗口已完全加载。

自定义编写的jquery代码如下：

$(window).on('load resize', function(){

        $(window).on('scroll', function(e){
            var scrollLength = $(window).scrollTop();
            var opacity = 0;
            if( scrollLength <= fadeStart ){
                opacity = 1;
            } 
            if (scrollLength <= fadeUntil ){
                opacity = 1- scrollLength/fadeUntil;
            }

            heroContent.css({
                'opacity' : opacity,
            });

            if (scrollLength < scroll1){
                $('.fixed-nav').removeClass('fixed'); 
            }
            if (scrollLength > scroll1 && scrollLength < scroll2){
                $('.fixed-nav').addClass('fixed');
                chapterNum.text('01');
                window.location.hash = "story1";
                $('.fixed-nav ul li').removeClass('active');
                $('.fixed-nav ul li:first-of-type').addClass('active');
            } 
            if (scrollLength > scroll2 && scrollLength < scroll3) {
                chapterNum.text('02');
                window.location.hash = "story2";
                $('.fixed-nav ul li').removeClass('active');
                $('.fixed-nav ul li:nth-of-type(2)').addClass('active');
            } 
            if (scrollLength > scroll3 && scrollLength < scroll4) {
                chapterNum.text('03');
                window.location.hash = "story3";
                $('.fixed-nav ul li').removeClass('active');
                $('.fixed-nav ul li:nth-of-type(3)').addClass('active');
            }
            if (scrollLength > scroll4 && scrollLength < scroll5) {
                chapterNum.text('04');
                window.location.hash = "story4";
                $('.fixed-nav ul li').removeClass('active');
                $('.fixed-nav ul li:nth-of-type(4)').addClass('active');
            }
            if (scrollLength > scroll5) {
                chapterNum.text('05');
                window.location.hash = "team";
                $('.fixed-nav ul li').removeClass('active');
                $('.fixed-nav ul li:nth-of-type(5)').addClass('active');
            }

        });
    });

Answer 1

一些指示：

您在每次调整大小时都设置了一个新的事件监听器。
每当您编写$("..")时，jQuery都会在DOM树中搜索您要定位的元素。这是一个昂贵的＆＃39;行动。尝试跟踪在滚动时执行的方法外部所需的元素。
使用else if阻止评估所有if个语句。

E.g：

if (scrollLength < scroll1){ /* .. */ }
if (scrollLength > scroll1 && scrollLength < scroll2) { /* .. */ }

也可以写成：

if (scrollLength < scroll1){ /* .. */ }
else if (scrollLength < scroll2) { /* .. */ }

Answer 2

我认为主要问题是$(window).on('scroll',...)函数嵌套在 $(window).on('resize',...)函数中。调整窗口大小时，每次都会对窗口应用其他绑定！您可以使用.off()，但我认为最好将它们分开：

$(window).on('load resize', function(){ $(window).scroll(); }); $(window).on('scroll',...);

至于更新哈希值，请使用replaceState（ref;这在IE8 / 9中不起作用）

window.history.replaceState({}, '', '#story3');

更新滚动和其他滚动事件的哈希 - 性能问题

2 个答案: