jquery - 重置响应功能

Question

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

脚本

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