我正在尝试在固定到顶部导航栏的Bootstrap上添加一个滑动效果。当用户向下滚动到普通导航栏的高度时，会出现固定的导航栏。我这样做是通过在导航栏中添加和删除navbar-fixed-top类来实现的。以下是我最终的非工作代码，它可以切换导航栏的显示而不是向下滑动。请帮忙..
jQuery(document).ready(function($) {
var $navheight = $('.navbar').outerHeight();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= $navheight) {
$('.navbar').addClass('navbar-fixed-top sticky-nav').slideDown('slow');
} else {
$('.navbar').removeClass('navbar-fixed-top sticky-nav');
}
});
});.content {
display: block;
width: 100%;
height: 1000px;
}
.sticky-nav {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-body">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="clearfix"></div>
<div class="content">
</div>
</div>
答案 0 :(得分：1)
所以粘性放置和滑动有一些奇怪之处。我相信我能够通过边缘和动画来接近你想要的东西。看看你的想法。
如果你想知道我为什么要使用＆＃39;一个＆＃39;到处都是。 ＆＃39;一个＆＃39;只执行一次处理程序。我尝试使用它来减少处理程序在运行时被调用的次数。滚动火灾 - 很多 - 。
jQuery(function($) {
var $navbar = $('.navbar'),
navheight = $navbar.outerHeight(),
$window = $(window);
function toggleNavBar() {
var scroll = $window.scrollTop();
if (scroll >= navheight) {
if (!$navbar.hasClass('navbar-fixed-top')) {
$navbar.addClass('navbar-fixed-top');
$navbar.css('margin-top', -navheight);
$navbar.animate({ marginTop: 0 }, 500, function() {
$window.one('scroll', toggleNavBar);
});
} else {
$window.one('scroll', toggleNavBar);
}
} else {
if ($navbar.hasClass('navbar-fixed-top')) {
$navbar.removeClass('navbar-fixed-top');
}
$window.one('scroll', toggleNavBar);
}
}
$window.one('scroll', toggleNavBar);
});.content{
display:block;
width:100%;
height:1000px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-body">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="clearfix"></div>
<div class="content">
</div>
</div>