Question

我使用fullpage.js构建固定滚动页面。这是粗略的例子＆gt; https://pages.devex.com/Fixed-Scroll-Test.html

我想在＆＃34; logo＆＃34;添加一个额外的课程。（滚动到第二部分后，固定在左上角），让我们说是颜色：白色。

我想实现这个目标，因为我会使用黑白背景，我希望在导航元素中有很好的对比。

我使用的是这样的东西，但我没有工作，也许它干扰了fullpage.js？

        if ( $('body').scrollTop() > $('#section1').position.top ) {
            $('.devexlogo').addClass('white');
        }

Answer 1

看起来像fullpage.js混淆了jQuery获取窗口的scrollTop（）的方式，但是fullpage.js实际上有内置的东西可以帮助你解决这个问题。将onLeave部分添加到您的代码

    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['firstPage', 'secondPage', '3rdPage'],
            sectionsColor: ['#999999', '#F1F1F1', '#7E8F7C'],
            navigation: true,
            navigationPosition: 'right',
            navigationTooltips: ['First page', 'Second page', 'Third and last page'],
            responsiveWidth: 900,
            onLeave: function(index, nextIndex, direction){
                if (nextIndex != 1){
                    $('.devexlogo').addClass('white');
                } else {
                    $('.devexlogo').removeClass('white');
                }
            }
        });
    });

作为旁注，您的代码无论如何都有错误，您错过了()。它本来是

$('#section1').position().top

Answer 2

谢谢大家的答案。

幸运的是，fullpage.js将一个特殊的类分配给活动部分。像fp-viewing-sectionname

这样的东西

所以我最终指出要为我需要改变的元素指定特殊的css规则。

这篇论文帮了很多忙：https://www.youtube.com/watch?v=qiCVPpI9l3M

Answer 3

您只加载了一次代码片段（这将导致不添加该类）。

你想要这样的东西：

$("#fullpage").scroll(function(){
  //your code here
});

确保您调用此函数的容器附加了overflow: scroll CSS属性！点击此处：https://api.jquery.com/scroll/

使用fullpage.js在固定元素上滚动后添加或删除css类

3 个答案: