如您所见，当您向下滚动并成功使用技巧将其动画化时，导航栏会停留在页面顶部。问题是，当它回到页面顶部时，我无法使其动画。我正在使用Bootstrap 3
的HTML
<nav id="navigation" class="navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-12" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="#">
<img class="img-responsive" alt="Corex" src="images/logo.png">
</a>
</div>
<div class="shopbar pull-right">
<a data-toggle="collapse" href="#nav-shop" class="collapsed"> <i class="fa fa-lg fa-shopping-cart"></i> </a>
<a data-toggle="collapse" href="#search" class="collapsed"> <i class="fa fa-lg fa-search"></i> </a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<a data-toggle="dropdown" data-target="#" href="#" class="active"> Home <span class="main-text-color light">+</span> </a>
<ul class="dropdown-menu" role="menu">
<li>home shop</li>
<li>home events</li>
<li>home paralax</li>
<li>home blog</li>
<li>home portfolio</li>
<li>home corporate : v1</li>
<li>home corporate : v2</li>
<li>home corporate : v3</li>
<li>home corporate : v4</li>
<li>home corporate : v5</li>
<li>home corporate : v6</li>
<li>create your own <i class="fa fa-play-circle-o"> </i> </li>
</ul>
</div>
</li>
<li> <a href="#"> Headers <span class="main-text-color light">+</span> </a> </li>
<li> <a data-toggle="collapse" href="#uber-menu-1" class="collapsed hover-menu" href="#"> Shortcodes <span class="main-text-color light">+</span> </a> </li>
<li> <a href="#"> Features <span class="main-text-color light">+</span> </a> </li>
<li> <a href="#"> Blog <span class="main-text-color light">+</span> </a> </li>
<li> <a href="#"> Portfolio <span class="main-text-color light">+</span> </a> </li>
<li> <a href="#"> Shop <span class="main-text-color light">+</span> </a> </li>
<li> <a href="#"> Events <span class="main-text-color light">+</span> </a> </li>
</ul>
</div>
</div>
</div>
</div>
</nav>
的CSS
#navigation.navbar-static-top {
transition: top 1s ease;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
top: -200px;
-webkit-box-shadow: none;
box-shadow: none;
}
#navigation.navbar-fixed-top {
opacity: 0.95;
transition: top 1s ease;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
top: 0;
}
#navigation a.navbar-brand {
line-height: 72px;
padding: 15px 0;
}
#navigation .navbar-brand img {
display: inline-block;
}
#navigation li {
display: inline-block;
line-height: 103px;
}
#navigation li a {
font-size: 13px;
font-weight: 500;
border-radius: 2px;
padding: 8px 5px 8px 14px;
display: inline-block;
}
#navigation a:hover {
text-decoration: none;
}
JAVASCRIPT
var offset = 220;
var duration = 500;
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > offset) {
jQuery('#totop').removeClass('colapsed');
jQuery('#navigation').addClass('navbar-fixed-top');
jQuery('#navigation').removeClass('navbar-static-top');
jQuery('#nav-shop').addClass('fixed-top');
jQuery('#search').addClass('fixed-top');
} else {
jQuery('#totop').addClass('colapsed');
jQuery('#navigation').removeClass('navbar-fixed-top');
jQuery('#navigation').addClass('navbar-static-top');
jQuery('#nav-shop').removeClass('fixed-top');
jQuery('#search').removeClass('fixed-top');
}
});
===编辑===
极简主义示例：http : //jsfiddle.net/julienvignolles/xwNqu/
使用Bootstrap，您的导航组件具有2种状态：
navbar-static-top：在流程中（即不是绝对/固定/相对）navbar-fixed-top：与position: fixed和top: 0动画是顶部的幻灯片。我们只是做添加类具有不同的top值，transition: top 1s ease（我们可以替代top由all像混浊或任何其他动画属性）。
向上滚动时，我们删除class navbar-fixed-top。导航栏不再position: fixed只是在流中。因此，我们不能使用隐藏动画。
工作环境是使用第三种状态，就像您在示例中所做的那样：
navbar-static-top （从顶部滚动0到100像素之间）：navbar-fixed-top （滚动至100像素以下）：我们修复了导航栏，但未显示navbar-move-down （滚动至220像素以下）：我们显示导航栏注意：#navigation.navbar-static-top并非必需，在中重命名此规则会更简单#navigation。
的CSS
#navigation.navbar-fixed-top {
/* … */
top: -100px;
}
#navigation.navbar-show-down {
top: 0;
}
JAVASCRIPT
var offset_stuck = 100;
var offset_show_down = 220;
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > offset_stuck) {
jQuery('#navigation').addClass('navbar-fixed-top');
jQuery('#navigation').removeClass('navbar-static-top');
// …
} else {
jQuery('#navigation').removeClass('navbar-fixed-top');
jQuery('#navigation').addClass('navbar-static-top');
// …
}
if (jQuery(this).scrollTop() > offset_show_down) {
jQuery('#navigation').addClass('navbar-show-down');
} else {
jQuery('#navigation').removeClass('navbar-show-down');
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句