1

我正在尝试创建一个固定导航菜单，当用户滚动超过 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;      
}

上面的代码可以在用户超过 500 像素时使固定导航菜单动画化。但是，当用户向上滚动屏幕而不是立即消失时，我需要菜单再次设置动画。

如果有人可以建议对允许菜单进出动画的javascript进行更改，我将不胜感激？

谢谢！

4

3 回答 3

2

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 以使其慢慢不可见。请根据您的延迟要求使用任何值。

于 2013-10-24T09:05:50.457 回答
2

您可以执行以下操作：

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;      
}
于 2013-10-24T09:35:51.930 回答
0

不需要使用任何 javascript 或其库，您可以使用 bootstrap build in data 属性和一些 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>

于 2016-12-08T18:56:51.877 回答