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添加的CSS类来更改部分页面的body元素。并且只为CSS处理它...它会更快。

但是如果您仍然希望显示scrollBar并使用CSS处理jQuery instaed，那么请考虑到您的代码在每个滚动上执行数百次，这就是导致滞后...你应该更好地优化它......

像这样检查标志的东西会对它进行大量优化：

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。

fullPage.js scrollBar：true使浏览器与deelay一起移动

1 个答案: