Question

以下代码使我的标题反复出现和消失，而不是在向下滚动时隐藏它并在向上滚动时显示它。任何想法，为什么

var lastScrollTop = 0;
$(window).scroll(function() {
    var currentScrollTop = $(this).scrollTop();
    if (currentScrollTop > lastScrollTop) {
        $(".header").fadeOut();
    } else {
        $(".header").fadeIn();
    }
    lastScrollTop = currentScrollTop;
});

Answer 1

您需要这个吗？链接参考：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h

char strreved[256] = {0};
char strenc[1024] = {0};

Answer 2

我使用了您提供的jquery。检查是否符合您的要求。

var lastScrollTop = 0;
$(window).scroll(function() {
    var currentScrollTop = $(this).scrollTop();
    if (currentScrollTop > lastScrollTop) {
        $(".header").fadeOut();
    } else {
        $(".header").fadeIn();
    }
    lastScrollTop = currentScrollTop;
});

body {
  background-color: yellow;
}
.header {
  position: fixed;
  width: 100%;
  background-color: #fff;
  padding: 50px;
  border: 2px solid black;
}
.container {
  min-height: 100vh;
  min-width: 100vw;
}

<div class="header">
The Header
</div>
<div class="container">
First Content
</div>
<div class="container">
Second Content
</div>
<div class="container">
Third Content
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

在jsfiddle中找到此解决方案

标题在向下滚动时淡出，在向上滚动时显示

2 个答案: