fullPage.js滚动条:true使浏览器随deelay一起移动

fullPage.js scrollBar: true making the browser move with deelay

本文关键字：deelay 一起 移动 浏览器 js 滚动条 true fullPage      更新时间：2023-09-26

我的网站使用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

有滚动条的有一些滞后，我不知道该怎么命名。。干杯

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

您甚至可以在节更改时使用fullPage.js添加到页面body元素的CSS类。只需要处理CSS就可以了…这会更快。

但是，如果你仍然喜欢显示滚动条并使用CSS处理jQuery，那么请考虑到你的代码在每个滚动上都被执行了数百次，这就是导致滞后的原因。。。你应该更好地优化它…

像这样的东西，检查一个标志，会优化它很多：

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。

相关文章：