Javascript fullpage.js如何检测垂直滚动

我正在构建一个包含插件提供的几个“阶段”的页面

我的主要问题是，我需要应用一个固定位置的标题，默认情况下，我是通过使用一个简单的脚本来实现的，到目前为止，我在大多数情况下都使用这个脚本。这是：

$(document).scroll(function () {
  var a = $(this).scrollTop()
  if (a > 5) {
$('header').addClass('headerSnap')
  } else {
    $('header').removeClass('headerSnap')
  }
});

我只需计算视口偏移量amount，并告诉它使用固定位置将一个类附加到标题。但这里的问题是fullpage.js不允许我的简单脚本检测偏移量，因此没有应用该类

---

我能做些什么来绕过这个问题？

我自己设法解决了这个问题，我只是从它的设置中添加了一个滚动条，如下所示：

$(document).ready(function() {
    $('#fullpage').fullpage({
      scrollBar: true,
    });
});

我的脚本就是这样工作的，因为它后面有一个scollbar

注意：这回答了我的特定问题，这不是固定标题的总体解决方案。请重新阅读我的第一篇文章，了解更多信息

---

onLeave

使用

nextIndex

参数，您可以添加类或删除类

<div id="main-section">
   <div class="section-one">Sectioin 1</div>
   <div class="section-two">Sectioin 2</div>
   <div class="section-three">Sectioin 3</div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function(){
         jQuery('#main-section').fullpage({
            sectionsColor: ['red', 'orange', 'yellow'],
              onLeave: function(index, nextIndex, direction){        
                  console.log(nextIndex);
                    if(nextIndex == 1){
                        jQuery('header').removeClass('headerSnap');
                    }else{
                       jQuery('header').addClass('headerSnap');     
                    }
               }
         });
    });
    </script>

第1节
第2节
第3节
jQuery（文档）.ready（函数（）{
jQuery（“#main section”）。全文({
章节颜色：[“红色”、“橙色”、“黄色”]，
onLeave:函数（索引、nextIndex、方向）{
console.log（nextIndex）；
如果（nextIndex==1）{
jQuery（'header'）.removeClass（'headerSnap'）；
}否则{
jQuery（'header'）.addClass（'headerSnap'）；
}
}
});
});

第二个选项是每个主节，您可以添加一个类名，然后可以通过setInterval和hasClass检测该节

<script type="text/javascript">
    jQuery(document).ready(function(){
         jQuery('#main-section').fullpage({
              sectionsColor: ['red', 'orange', 'yellow'],
          });

        setInterval(function() {
          if(jQuery('.section-one').hasClass('fp-completely')){
             alert('section 1');
          }
          if(jQuery('.section-two').hasClass('fp-completely')){
             alert('section 2');
          }
        }, 500);
    });
    </script>

jQuery（文档）.ready（函数（）{
jQuery（“#main section”）。全文({
章节颜色：[“红色”、“橙色”、“黄色”]，
});
setInterval（函数（）{
if（jQuery（'.section one'）.hasClass（'fp-Complete'））{
警报（“第1节”）；
}
if（jQuery（'.section 2'）.hasClass（'fp-Complete'））{
警报（“第2节”）；
}
}, 500);
});

fullpage.js有一个可选的

fixedElements

。这应该可以满足您的所有需要。这样，我将被迫为另一个标题的内部页面添加更多标记，因为它们不打算使用fullpage.js构建。如果您想隐藏滚动条，还可以在

onLeave

回调中添加类

headerSnap

。