fullPage.js scrollBar：true使浏览器随Deelay移动

Question

我使用fullPage js脚本来为我的网站。我有个问题。 我有一些jQuery的是改变了我的头元素，当访问者滚动

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
if (scroll >= 1) { 
    $("header").addClass("tab-2-header") 
    $(".logo img").attr('src','http://verycreative.info/sebastian/img/logo-negative.png') 
    $("#menu li a:first").removeClass("active") 
    $("#menu li").addClass("negative-dotts") 
    $(".search img").fadeIn().attr('src','http://verycreative.info/sebastian/img/search-negative.png') 
    $(".search input").addClass("search-negative"); 
    } else { 
    $("header").removeClass("tab-2-header") 
    $(".logo img").attr('src','http://verycreative.info/sebastian/img/logo-positive.png') 
    $("#menu li a:first").addClass("active") 
    $("#menu li").removeClass("negative-dotts") 
    $(".search img").fadeIn().attr('src','http://verycreative.info/sebastian/img/search.png') 
    $(".search input").removeClass("search-negative");} 
}); 

基本上这是改变我的头了jQuery。

所有工作都很好，直到我不得不使用fullpagejs分段我的网站。这个脚本隐藏了我的滚动条，如果滚动条不可见，我上面的jquery不会启动，因为他不知道访问者正在滚动，或者因为滚动条不可见。

在fullPagejs我可以显示滚动条，所以我的头元素将显示与：

scrollBar: true 

如果我加入这行代码的滚动条是可见的，我的jQuery开始工作。

问题是，如果我使滚动条可见，我的网站之间有一些滞后（如框架）之间。任何ideeas如何我可以解决这个问题，或者如果它隐藏滚动条，但能够更改我的标题滚动的可能性？

您可以登录网站没有滚动条的位置：http://bit.ly/1AGcZvd

而且在滚动条的位置：http://bit.ly/1C6VH8m

在滚动条的一个有一定的滞后性，deelay，我不知道如何将它命名.. 干杯！

Answer 1

你不需要使用滚动条来使它工作。 如果您使用的是scrollBar:false，那么您应该使用fullpage.js提供的回调函数，例如afterLoad，这些回调函数在到达某个节后执行。

您甚至可以使用由fullPage.js添加到页面的body元素上的CSS类。只处理所有的CSS ......这会更快。

但是，如果您仍然喜欢显示scrollBar并处理jQuery与CSS不兼容的问题，那么请考虑您的代码正在执行数百次在每个滚动上，这就是造成滞后的原因......你应该更好地优化它...

这样的事情，这将检查一个标志，将优化了很多：

var hasChanged = false; 

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    if (scroll >= 1 && !hasChanged) { 
     $("header").addClass("tab-2-header") 
     $(".logo img").attr('src', 'http://verycreative.info/sebastian/img/logo-negative.png') 
     $("#menu li a:first").removeClass("active") 
     $("#menu li").addClass("negative-dotts") 
     $(".search img").fadeIn().attr('src', 'http://verycreative.info/sebastian/img/search-negative.png') 
     $(".search input").addClass("search-negative"); 
    } else { 
     $("header").removeClass("tab-2-header") 
     $(".logo img").attr('src', 'http://verycreative.info/sebastian/img/logo-positive.png') 
     $("#menu li a:first").addClass("active") 
     $("#menu li").removeClass("negative-dotts") 
     $(".search img").fadeIn().attr('src', 'http://verycreative.info/sebastian/img/search.png') 
     $(".search input").removeClass("search-negative"); 

     hasChanged = true; 
    }else{ 
     //whatever 
     //... 
     hasChanged = false;   
    } 
}); 

如果你还想要更多的改进，你可以只使用JavaScript而不是jQuery。 但是我个人只想处理CSS。