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

Question

我正试图使用javascript制作一个向上滚动时具有粘性而向下滚动时不显示的页眉，为此，我添加了一个类.header-up，并通过CSS给出了transform: translateY(-100%);。它运行得很好，但当我打开页眉中的整页菜单并试图关闭[时，当页眉位于顶部时没有问题，但我们可以在从顶部滚动一点后看到问题]，类"页眉向上"仍然存在。因此，页眉在视口区域后面向上。我尝试使用此代码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导航有位置：固定和顶部：0标题仍然在那里，但你的菜单元素在顶部。

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

#overlay-nav {
top: 100px;
}