javascript - 滚动功能处于事件状态时如何删除类

Question

我正在尝试制作一个标题，该标题在向上滚动时是粘性的，而在使用 javascript 向下滚动时不显示，为此我添加了一个类 .header-up 并提供了 transform : translateY(-100%); 通过 CSS。它工作得很好，但是当我打开标题中的整页菜单并尝试关闭时[当标题位于顶部时没有问题，但我们可以在从顶部滚动一点后看到问题] “header-up”类仍然存在。所以标题在视口(viewport)区域后面向上。我尝试使用此代码 s.removeClass("header-up") 删除 .header-up 类，以使 header 保持在同一位置。这是 jsFiddle

这是我用于滚动和切换整页菜单的 javascript。

$( document ).ready(function() {
    var scroll_pos = 0;
        var scroll_time;

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

      if (current_scroll >= $("#header").outerHeight()) {
        if (current_scroll <= scroll_pos) {
          $("#header").removeClass("header-up");
        } else {
          $("#header").addClass("header-up");
        }
      }

      scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
      }, 100);
    });
});



    $("#navbar-toggle").on("click", function(t) {
      var e = $(this).data("scroll-y"),
        i = $(window).scrollTop(),
        n = $("#navbar-toggle"),
        o = $("#overlay-nav"),
        s = $("#header"),
        r = $("body");
      o.hasClass("toggle")
        ? (r.css("top", "0px").removeClass("noscroll"),
          window.scrollTo(0, e),
          o.removeClass("toggle"),
          n.removeClass("open"),
          s.removeClass("overlay-nav-toggled"),
          s.removeClass("pos-fixed"),
          s.removeClass("header-up"),
          setTimeout(function() {
            s.removeClass("suppress-scroll");
          }, 700))
        : ($(this).data("scroll-y", i),
          o.addClass("toggle"),
          n.addClass("open"),
          s.addClass("overlay-nav-toggled suppress-scroll"),
          r.css("top", -i + "px").addClass("noscroll"));
    });

Answer 1

更新这个

if (current_scroll <= scroll_pos) { 

与以下内容

if (current_scroll <= scroll_pos || $('#header').hasClass('suppress-scroll')) {