重置响应的功能

Question

我有以下代码根据滚动事件添加/删除 .nav-up 和 .nav-down，除了屏幕

脚本

  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');
  }
}
lastScrollTop = st;
}
}

html

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

css

#s-nav { position: fixed; }

#s-nav.nav-up { top: -75px; }

@media screen and (max-width: 768px) {

  #s-nav.nav-up { top: 0; }
}

但是，当从移动设备切换到屏幕尺寸（响应式）时，屏幕尺寸会“上升”，就像窗口滚动一样。我想“重置”该功能，以便在屏幕尺寸为“向下”时保持“向下”

Answer 1

你可以在$(window).width() <= 768时添加一行来设置你想要的类：

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