我正在尝试创建一个固定的导航菜单，当用户滚动超过 500px 时出现，并在用户向上滚动页面时消失。
但是，我不希望它只是出现和消失，而是以滑动运动进行动画进出。
我在Stackoverflow（链接）上找到了这个问题的答案的一部分。JSFiddle 解决方案：http://jsfiddle.net/k3AHM/1/
var nav = $('.nav');
var scrolled = false;
$(window).scroll(function () {
if (500 < $(window).scrollTop() && !scrolled) {
nav.addClass('visible').animate({ top: '0px' });
scrolled = true;
}
if (500 > $(window).scrollTop() && scrolled) {
nav.removeClass('visible').css('top', '-30px');
scrolled = false;
}
上面的代码适用于当用户超过 500px 时固定导航菜单动画化到视图中的程度。但是，我需要菜单在用户向上滚动屏幕时再次动画化，而不是立即消失。
如果有人可以建议对 javascript 进行更改，允许菜单在进出时都进行动画处理，我将不胜感激？
谢谢！
你可以做这样的事情：
http://jsfiddle.net/k3AHM/4/
if (500 > $(window).scrollTop() && scrolled) {
//animates it out of view
nav.animate({ top: '-30px' });
//sets it back to the top
setTimeout(function(){
nav.removeClass('visible');
},500);
scrolled = false;
}
Animate 具有不同的重载，可以帮助您使用从左侧或右侧延迟的幻灯片按您想要的方式进行动画处理。
请参考 http://www.w3schools.com/jquery/jquery_animate.asp
在您的情况下，只需在删除可见类的同时进行动画处理，这样它就不会立即消失。
var nav = $('.nav');
var scrolled = false;
$(window).scroll(function () {
if (500 < $(window).scrollTop() && !scrolled) {
nav.addClass('visible').animate({ top: '0px' });
scrolled = true;
}
if (500 > $(window).scrollTop() && scrolled) {
nav.animate({ top: '-30px'}, 500);
scrolled = false;
}
});
上面你可以看到我指定了 500 的延迟，以使其缓慢不可见。请根据您的延迟要求使用任何值。
不需要
使用任何javascript或其库，您可以使用数据属性中的引导构建和一些css来实现这一点。
哈哈。当您在移动宽度下运行时，它看起来会很奇怪。
<html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.affix {
width: 100%;
top: -57px; /*Will be hidden in top since -57px. Remember same px*/
margin-top: 57px; /*Will take 0.2 seconds make a top marigin*/
}
.navbar {
-moz-transition: margin .2s linear;
-o-transition: margin .2s linear;
-webkit-transition: margin .2s linear;
transition: margin .2s linear;
}
</style>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Basic Topnav</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
<div style="min-height: 2500px">test</div>
</html>