滚动功能处于活动状态时如何删除类

Question

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

Answer 2

我不完全理解你的问题，但这是你要找的吗？

var lastScrollTop = 0;
var headerElement = $('header');

$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // scroll down
     headerElement.addClass('header-hidden');
   } else {
      // scroll up
     headerElement.removeClass('header-hidden');
   }
   
   lastScrollTop = st;
});

body {
  background: #f5f5f5;
  position: relative;
}

header {
  background: white;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 15px;
  transition: 500ms margin-top ease;
}
header.header-hidden {
  margin-top: -100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <p>header</p>
</header>

<p>accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae?</p>

编辑 根据此问题所有者的反馈： 单击按钮时标题消失的原因是因为您的#overlay-nav 具有 position: fixed 结合 top: 0 标题仍然存在，但您的菜单元素在它之上。

更改 z-index 值或更改 top: 0 值 下面的代码将解决您的问题，但不要忘记检查响应，因为您现在正在设置静态值

#overlay-nav {
   top: 100px;
}