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。