javascript - 在页面顶部添加特定类到滚动代码

Question

我有以下代码，当用户滚动时，它向#nav 添加/删除 .nav-down 和 .nav-up。

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;
}
});   

当函数将 .nav-down 添加到 #nav 时，我想将另一个名为 .extra 的类添加到 #nav。但我只希望它在用户位于页面顶部时添加它，而不是在任何其他时间添加它。所以它只会在用户位于页面顶部时添加。

Answer 1

查看 jQuery documentation在 scrollTop() 上。当你在页面顶部时它是 0，所以你应该有一个脚本，当 $(window).scrollTop() 是 0 时设置类，否则将其删除。

例如:

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

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

或者类似的东西。