javascript - 在页面顶部应用代码与滚动

我正在尝试在我的代码中添加条件语句，但似乎无法使其正常工作。我想在用户位于屏幕顶部时将.nav-down-top应用于＃s-nav，而不在页面顶部时将.nav-down应用于＃s-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 {



  // !!!! Code issue

        // Scroll Up (@ top of screen)
        if ($(window).scrollTop() === 0) {
            $('#s-nav').removeClass('nav-up').addClass('nav-down-top');

       } else {

        // Scroll Up (NOT @ top of screen)
        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;
}
});

html

<nav id="s-nav" class="nav-down"> ...

最佳答案

因此，正如我所说，您不会同时删除两个未使用的类，并且您的代码遇到了一些问题（缺少右尖括号，孤立的else语句）。工作功能如下所示：

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('up').removeClass('top').addClass('down');
    } else {
        // Scroll Up (@ top of screen)
        if (st === 0) {
            $('#s-nav').removeClass('up').removeClass('down').addClass('top');
       } else {//if (st + $(window).height() < $(document).height()) {
            $('#s-nav').removeClass('down').removeClass('top').addClass('up');
        }
    }
}
lastScrollTop = st;
}

小提琴：https://jsfiddle.net/wm6kvm6u/