Javascript 在页面顶部向滚动代码添加特定类

我有以下代码，在用户滚动时将

.nav down

和

.nav up

添加/删除到#nav

jQuery(document).ready(function($){
  var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('nav').outerHeight();

$(window).scroll(function(event) { didScroll = true; });

setInterval(function() {
  if (didScroll) {
  hasScrolled();
  didScroll = false;
  }
 }, 150);

function hasScrolled() {
  if($( window ).width() > 768) {
  var st = $(this).scrollTop();
  if (Math.abs(lastScrollTop - st) <= delta)
    return;

  if (st > lastScrollTop && st > navbarHeight ) {

    // Scroll Down
    $('#s-nav').removeClass('nav-down').addClass('nav-up');

} else {

    // Scroll Up
    if (st + $(window).height() < $(document).height()) {
        $('#s-nav').removeClass('nav-up').addClass('nav-down');
    }
 }

} else {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
lastScrollTop = st;
}
});   

jQuery（文档）.ready（函数（$）{
卷轴；
var lastScrollTop=0；
varδ=5；
var navbarHeight=$（'nav'）.outerHeight（）；
$（窗口）.scroll（函数（事件）{didcoll=true；}）；
setInterval（函数（）{
如果（滚动）{
哈斯克罗尔（）；
didcoll=false；
}
}, 150);
函数hasScrolled（）{
如果（$（窗口）.width（）>768）{
var st=$（this.scrollTop（）；
if（Math.abs（lastScrollTop-st）lastScrollTop&&st>navbarHeight）{
//向下滚动
$（'s-nav'）.removeClass（'nav-down'）.addClass（'nav-up'）；
}否则{
//向上滚动
如果（st+$（窗口）.height（）<$（文档）.height（））{
$（'s-nav'）.removeClass（'nav-up'）.addClass（'nav-down'）；
}
}
}否则{
$（'s-nav'）.removeClass（'nav-up'）.addClass（'nav-down'）；
}
lastScrollTop=st；
}
});   

当函数将

.nav down

添加到#nav时，我想将另一个名为

.extra

的类添加到#nav。但是我只希望在用户位于页面顶部时添加它，而不是在其他任何时候添加它。因此，只有当用户位于页面顶部时，才会添加它。

请查看

scrollTop（）

上的。当您位于页面顶部时，它是0，因此您应该有一个脚本，该脚本将在

$（窗口）时设置类。scrollTop（）

为0，否则将其删除

例如：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll === 0) {
        $(".clearHeader").addClass("darkHeader");
    }
});

---

或者类似的东西。

听起来不错。你试过什么？您认为

$（this）.scrollTop（）

在页面顶部会有什么值？如下所述，我在一个单独的函数中尝试了$（window）.scrollTop（）方法，但当它在两个单独的函数中时，该函数似乎会相互干扰。最明显的是，当用户向上滚动到顶部时，它不适用，但是当您刷新页面时，它可以工作。那么，为什么要将它放在两个单独的函数中呢？我以前尝试过这个方法，问题是两个代码将在同一个div上同时运行，因此它似乎无法按预期工作。我在想，如果可以在当前代码中应用，它会更平滑，那么为什么不在添加

nav down

的

if

语句中添加我提供的相同代码呢？或者，如果您需要这两个条件都为真，您可以将

if

语句更改为

if（st+$（window）.height（）<$（document.height（）&&&$（window.scrollTop（）==0）{//code}

，对吗？然后，如果需要，我必须添加另一个else语句（因为它们不会在页面顶部）。我的问题是，当页面加载时，它似乎只应用一次。当用户滚动到顶部时，它不会更改，除非页面已加载reloaded@user3550879我刚收到一份通知，你接受了这个答案。这是否意味着你已经能够让它工作了？我还没有让它工作，但它已经让我找到了一个更好的方式去做关于/完成我想要的。你在评论中提供的答案帮助很大，但我只能通过接受上面的答案来给你信用