fullpage.js - 在部分内滚动时将 css 类添加到标题

Question

我正在使用 fullpage.js

https://github.com/alvarotrigo/fullPage.js/

在网站的首页上，到目前为止它运行良好。

我有 4 个部分。 第一部分的内容多于浏览器窗口的高度，因此需要在该部分内滚动。 我已经添加了滚动条，它可以与滚动条和鼠标滚轮一起使用。

现在我的问题。 我有一个粘性标题，只要在此部分内向下滚动，我就想降低它的高度（一旦我向上滚动到顶部，高度就会增加）。 因此，我想在使用 fullpage.js 的滚动条或鼠标滚轮时将 css 类“sticky”添加到“header”，这样我就可以使用 css 以不同的方式格式化带有“sticky”类的标题。

不幸的是，“滚动事件”在这里不起作用，正如这里已经提到的： FullPage.JS Scrolling

我尝试了以下

$(function(){
window.addEventListener("wheel", function() {
$(document).ready(function(){
var  scrollclass = $('.slimScrollBar').position();
if(scrollclass.top > 0){
$('header').addClass('sticky');
}
else{
$('header').removeClass('sticky');
}
});
});})

这种工作，但是第一次使用鼠标滚轮时不会添加粘性类（它是通过“第二次转动鼠标滚轮”添加的）并且在滚动回顶部时不会被删除，我滚动回顶部后需要再转动一次轮子才能再次删除粘性类。

如果我将 if 语句更改为 >= 0，它会在鼠标滚轮的第一圈工作，但是当我滚动回顶部时，我不会删除该类。

第二个问题是，这当然只能使用鼠标滚轮，而不是拖动 fullpage.js 创建的滚动条

任何想法或提示如何解决这个问题？

谢谢 约翰

Answer 1

您可以使用“afterLoad”方法，如 fullPage.JS 的文档中所述： https://github.com/alvarotrigo/fullPage.js#afterload-anchorlink-index