Question

我正在使用fullpage.js

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

在网站的首页上，到目前为止工作正常。

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

现在我的问题。我有一个粘性标题，我希望在此部分内部向下滚动时立即降低高度（一旦我向上滚动到顶部就会增加高度）。因此，当使用fullpage.js或鼠标滚轮的滚动条时，我想将css类“sticky”添加到“header”中，以便我可以使用css为“sticky”类格式化标题。

不幸的是，“scroll-Events”在这里不起作用，如下所述： 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语句更改为＆gt; = 0，它将在鼠标滚轮的第一个转弯时起作用，但是当滚动回到顶部时我不会删除该类。

第二个问题是，这只能通过使用鼠标滚轮来实现，而不是通过拖动fullpage.js创建的滚动条

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

由于约翰

Answer 1

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

fullpage.js - 在部分

1 个答案: