twitter-bootstrap Bootstrap 4 - 如何使固定顶部导航栏在滚动时消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54164397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 - How to make fixed-top navbar disappear on scroll
提问by Emanuel
With Bootstrap 4, how can I make the fixed-top navbar disappear on scroll? I've attached below the html code for the default Bootstrap 4 navbar.
使用 Bootstrap 4，如何使固定顶部导航栏在滚动时消失？我已在默认 Bootstrap 4 导航栏的 html 代码下方附加。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto py-md-2">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>回答by joshmoto
Cue beat me too it. Similar to his answer but not using short code.
Cue 也打败了我吧。类似于他的回答，但不使用短代码。
jQuery
jQuery
// scroll functions
$(window).scroll(function(e) {
// add/remove class to navbar when scrolling to hide/show
var scroll = $(window).scrollTop();
if (scroll >= 150) {
$('.navbar').addClass("navbar-hide");
} else {
$('.navbar').removeClass("navbar-hide");
}
});
CSS navbar fade out option
CSS 导航栏淡出选项
Codeply demo https://www.codeply.com/go/rTR1dcn4n6
Codeply 演示https://www.codeply.com/go/rTR1dcn4n6
.navbar {
opacity: 1;
transition: opacity 0.5s ease;
}
.navbar-hide {
pointer-events: none;
opacity: 0;
}
CSS navbar slide up option
CSS 导航栏向上滑动选项
Codeply demo https://www.codeply.com/go/7Fab8Thufl
Codeply 演示https://www.codeply.com/go/7Fab8Thufl
.navbar {
transition: top 0.5s ease;
}
.navbar-hide {
top: -56px;
}
Cue's answer is probably much better if you like less code, here is his method below using my hide class.
如果您喜欢更少的代码，Cue 的答案可能会好得多，下面是他使用我的 hide 类的方法。
Cue's jQuery
提示的 jQuery
// scroll functions
$(window).scroll(function(e) {
// add/remove class to navbar when scrolling to hide/show
$('.navbar')[$(window).scrollTop() >= 150 ? 'addClass' : 'removeClass']('navbar-hide');
});
CSS navbar fade out option (same as above)
CSS 导航栏淡出选项（同上）
Codeply demo https://www.codeply.com/go/KPnx8ewEED
Codeply 演示https://www.codeply.com/go/KPnx8ewEED
CSS navbar slide up option (same as above)
CSS 导航栏向上滑动选项（同上）
Codeply demo https://www.codeply.com/go/i82vYBGeu7
Codeply 演示https://www.codeply.com/go/i82vYBGeu7
回答by Cue
To conditionally remove the fixed positioning of the navbar when you've reached a certain offset (in this example we'll use 150px from top of viewport) then you could do:
要在达到某个偏移量时有条件地移除导航栏的固定位置（在本例中，我们将使用距视口顶部 150 像素的距离），那么您可以执行以下操作：
$(window).on('scroll', function (e) {
$('.navbar')[$(window).scrollTop() >= 150 ? 'removeClass' : 'addClass']('fixed-top');
})
As per ajax333221's comment, toggleClass()could also be used:
根据ajax333221的评论，toggleClass()也可以使用：
$(window).on('scroll', function (e) {
$('.navbar').toggleClass('fixed-top', $(window).scrollTop() < 150);
})
回答by Heather Chloe
Fixed-top forces the navigation to remain fixedto the top of the viewport.
Fixed-top 强制导航保持固定在视口的顶部。
"An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element."
“具有 position: fixed; 的元素相对于视口定位，这意味着即使页面滚动它也始终保持在同一位置。顶部、右侧、底部和左侧属性用于定位元素。”
Html elements natively move as you scroll down. If you want the navigation to scroll with the content, then you need to remove this class.
当您向下滚动时，Html 元素会自然移动。如果您希望导航随内容滚动，则需要删除此类。
