为啥我的导航栏在向下滚动时不隐藏而在向上滚动时出现？
Posted
技术标签:
【中文标题】为啥我的导航栏在向下滚动时不隐藏而在向上滚动时出现？【英文标题】：Why doesn't my nav bar hide when scrolling down and appear when scrolling up?为什么我的导航栏在向下滚动时不隐藏而在向上滚动时出现？ 【发布时间】：2020-08-02 17:11:29 【问题描述】：所以我尝试将此http://jsfiddle.net/mariusc23/s6mLJ/31/ 代码调整到我的网页，以便我的导航栏在向下滚动时隐藏并在向上滚动时出现，但是它似乎不起作用，我只是看不到问题，我已经在下面包含了我的代码，感谢您的帮助！
<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event)
didScroll = true;
);
setInterval(function()
if (didScroll)
hasScrolled();
didScroll = false;
, 250);
function hasScrolled()
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight)
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
else
// Scroll Up
if(st + $(window).height() < $(document).height())
$('header').removeClass('nav-up').addClass('nav-down');
lastScrollTop = st;
</script><style type="text/css">
a
box-sizing: border-box;
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@font-face
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
body
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
padding-top:110px;
max-width: 1600px; margin: auto
header
background: #55d6aa;
flex: 0 0 100%;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
height:110px;
.nav-up
top: -110px;
header::after
content: '';
display: table;
clear: both;
.logo
float: left;
padding: 10px 0;
margin-left: 30px;
nav
float: right;
nav ul
margin-right: 60px;
padding: 0;
list-style: none;
nav li
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
nav a
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
nav a:hover
color: #000;
nav a::before
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
nav a:hover::before
width: 100%;
h1
margin: 10px;
img
max-width: 100%;
.review
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
.text-wrapper
max-width:800px;
margin:auto;
aside .articles
list-style-type: none;
padding: 0px;
margin-top:0px;
border-top:3px solid;
.articles > li.card
border-left: 1px solid #55d6aa;
border-right: 1px solid #55d6aa;
border-bottom: 1px solid #55d6aa;
.articles h3, .articles p
margin-top: 0px;
.articles .content_col
margin-left: 10px;
.card-link
/* remove deafult link color + underline */
color: #55d6aa;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
.card-link:hover
background: #f3f3f3;
button
color: #55d6aa;
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #55d6aa;
position: relative;
margin: 1em;
display: inline-block;
padding: 0.5em 1em;
transition: all 0.3s ease-in-out;
text-align: center;
font-weight: bold;
button:before,
button:after
content: "";
display: block;
position: absolute;
border-color: #55d6aa;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
button:before
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
button:after
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
button
color: #55d6aa;
border-color: #55d6aa;
button:before,
button:after
border-color: #55d6aa;
button:hover:before,
button:hover:after
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #55d6aa;
transform: rotateY(180deg);
button:hover
color: #55d6aa;
background-color: transparent;
border-color: #55d6aa;
</style><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class= "nav-down">
<div class="logo">
<img src="logo.png" >
</div>
<nav>
<ul>
<li> <a href="#">Our Top Picks</a></li>
<li><a href="#">Wall of Shame</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Tv Shows</a></li>
</ul>
</nav>
</div>
</header>
<aside>
<h2 style="padding:10px;">Most Popular Posts</h2>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Features</h3>
<p>Responsive Buttons!</p>
<button>Hover me</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 3 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/302" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 4 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/303" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 5 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/304" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 6 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/305" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</li> <!-- card 7 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/306" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" >
</div>
<div class = "text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>【问题讨论】：
问题是当我向下滚动时，导航栏没有隐藏 【参考方案1】：因为您的 html 中的第 15 行和第 98 行有额外的结束标记，所以我已经修复了这个问题，请参见下面的演示
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event)
didScroll = true;
);
setInterval(function()
if (didScroll)
hasScrolled();
didScroll = false;
, 250);
function hasScrolled()
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight)
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
else
// Scroll Up
if(st + $(window).height() < $(document).height())
$('header').removeClass('nav-up').addClass('nav-down');
lastScrollTop = st;
a
box-sizing: border-box;
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@font-face
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
body
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
padding-top:110px;
max-width: 1600px; margin: auto
header
background: #55d6aa;
flex: 0 0 100%;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
height:110px;
.nav-up
top: -110px;
header::after
content: '';
display: table;
clear: both;
.logo
float: left;
padding: 10px 0;
margin-left: 30px;
nav
float: right;
nav ul
margin-right: 60px;
padding: 0;
list-style: none;
nav li
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
nav a
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
nav a:hover
color: #000;
nav a::before
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
nav a:hover::before
width: 100%;
h1
margin: 10px;
img
max-width: 100%;
.review
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
.text-wrapper
max-width:800px;
margin:auto;
aside .articles
list-style-type: none;
padding: 0px;
margin-top:0px;
border-top:3px solid;
.articles > li.card
border-left: 1px solid #55d6aa;
border-right: 1px solid #55d6aa;
border-bottom: 1px solid #55d6aa;
.articles h3, .articles p
margin-top: 0px;
.articles .content_col
margin-left: 10px;
.card-link
/* remove deafult link color + underline */
color: #55d6aa;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
.card-link:hover
background: #f3f3f3;
button
color: #55d6aa;
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #55d6aa;
position: relative;
margin: 1em;
display: inline-block;
padding: 0.5em 1em;
transition: all 0.3s ease-in-out;
text-align: center;
font-weight: bold;
button:before,
button:after
content: "";
display: block;
position: absolute;
border-color: #55d6aa;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
button:before
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
button:after
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
button
color: #55d6aa;
border-color: #55d6aa;
button:before,
button:after
border-color: #55d6aa;
button:hover:before,
button:hover:after
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #55d6aa;
transform: rotateY(180deg);
button:hover
color: #55d6aa;
background-color: transparent;
border-color: #55d6aa;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class= "nav-down">
<div class="logo">
<img src="logo.png" >
</div>
<nav>
<ul>
<li> <a href="#">Our Top Picks</a></li>
<li><a href="#">Wall of Shame</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Tv Shows</a></li>
</ul>
</nav>
</header>
<aside>
<h2 style="padding:10px;">Most Popular Posts</h2>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Features</h3>
<p>Responsive Buttons!</p>
<button>Hover me</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 3 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/302" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 4 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/303" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 5 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/304" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 6 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/305" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 7 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/306" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" >
</div>
<div class = "text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>【讨论】：
@TheTimeVader 如果您认为这个答案解决了您的问题，那么您可以将其标记为答案以上是关于为啥我的导航栏在向下滚动时不隐藏而在向上滚动时出现？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Xamarin Forms 中滚动时折叠（隐藏或向上滑动）导航栏（标题栏）？
React - 向下滚动时向上滑动固定导航栏，向上滚动时向下滑动