向下滚动时标题淡入淡出显示向上滚动脉冲
[英]Header fade on scroll down show on scroll up pulsing
问题描述
以下代码使我的标题反复淡入淡出，而不是在向下滚动时隐藏它并在向上滚动时显示它。 任何想法为什么
var lastScrollTop = 0; $(window).scroll(function() { var currentScrollTop = $(this).scrollTop(); if (currentScrollTop > lastScrollTop) { $(".header").fadeOut(); } else { $(".header").fadeIn(); } lastScrollTop = currentScrollTop; });
2 个解决方案
解决方案1
0 2020-08-26 14:31:13
你需要这个吗？ 链接参考： https : //www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h
<html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> body { position: relative; } .affix { top:0; width: 100%; z-index: 9999 !important; } .navbar { margin-bottom: 0px; } .affix ~ .container-fluid { position: relative; top: 50px; } #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;} #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;} #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;} #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;} #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;} </style> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> <h1>Scrollspy & Affix Example</h1> <h3>Fixed navbar on scroll</h3> <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p> <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p> </div> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#section41">Section 4-1</a></li> <li><a href="#section42">Section 4-2</a></li> </ul> </li> </ul> </div> </div> </div> </nav> <div id="section1" class="container-fluid"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section2" class="container-fluid"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section3" class="container-fluid"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section41" class="container-fluid"> <h1>Section 4 Submenu 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section42" class="container-fluid"> <h1>Section 4 Submenu 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> </body> </html>
解决方案2
0 2020-08-26 19:20:29
我用了你给的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 中找到这个解决方案
如何使标题在向下滚动时消失/消失并在向上滚动时重新出现？
[英]How can I make my header fade out/disappear on scroll down and reappear on scroll up?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.