javascript - fullPage.js滚动条: true making the browser move with 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 开始工作。

问题是，如果我使滚动条可见，我的网站将在部分之间移动，并出现一些滞后(如框架)。我有什么想法可以解决这个问题，或者是否可以隐藏滚动条但能够在滚动时更改我的标题？

您可以在此处查看没有滚动条的网站:http://bit.ly/1AGcZvd

这里有滚动条:http://bit.ly/1C6VH8m

带滚动条的有一些延迟，延迟，我不知道如何命名..干杯!

Answer 1

您不需要使用滚动条即可使其工作。如果您使用 scrollBar:false，那么您应该使用 fullpage.js 提供的回调，例如 afterLoad在到达某个部分后执行。

您甚至可以在部分更改时使用 fullPage.js 添加到页面 body 元素的 CSS 类。并且只处理 CSS ......这会更快。

但是，如果您仍然喜欢显示滚动条并使用 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。