gpt4 book ai didi

jquery - Bootstrap 4 - 如何使固定顶部导航栏在滚动时消失

转载 作者:行者123 更新时间:2023-12-01 06:14:17 26 4
gpt4 key购买 nike

使用 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>

最佳答案

Cue 也打败了我。与他的答案类似,但不使用短代码。

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 导航栏淡出选项

Codeply 演示 https://www.codeply.com/go/rTR1dcn4n6

.navbar {
opacity: 1;
transition: opacity 0.5s ease;
}

.navbar-hide {
pointer-events: none;
opacity: 0;
}

CSS 导航栏向上滑动选项

Codeply 演示 https://www.codeply.com/go/7Fab8Thufl

.navbar {
transition: top 0.5s ease;
}

.navbar-hide {
top: -56px;
}
<小时/>

如果您喜欢更少的代码,Cue 的答案可能会更好,下面是他使用我的隐藏类的方法。

Cue 的 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 导航栏淡出选项(同上)

Codeply 演示 https://www.codeply.com/go/KPnx8ewEED

CSS 导航栏向上滑动选项(同上)

Codeply 演示 https://www.codeply.com/go/i82vYBGeu7

关于jquery - Bootstrap 4 - 如何使固定顶部导航栏在滚动时消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54164397/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com