你如何重新创建一个导航栏,就像在这里找到的那样
在这里,如果您滚动,导航栏不仅会在顶部跟随您,而且公司的符号也会淡入导航栏中。
有人可以帮助或指导我正确的方向吗?
我创建了这个:
jQuery:
var navPos = $('#nav').offset().top;
$(window).scroll(function(){
var fixIT = $(this).scrollTop() >= navPos;
var setPos = fixIT ? 'fixed' : 'relative' ;
var logoSH = fixIT ? 'show' : 'hide' ;
$('#nav').css({position: setPos});
$('#mini-logo')[logoSH](300);
});
HTML:
<div id="header">
<h1>Company logo</h1>
<div id="navigation">
<ul id="nav">
<li id="mini-logo"><a href="#">LOGO</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">RESOURCES</a></li>
<li><a href="#">CUSTOMERS</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">COMPANY</a></li>
</ul>
</div>
</div>
CSS:
#header{
background:#eee;
}
#header h1{
padding:20px;
}
#navigation{
height:40px;
}
#nav{
position:relative;
top:0;
width:100%;
list-style:none;
background:#76A000;
height:40px;
}
#nav li{
float:left;
}
#nav a{
text-decoration:none;
display:block;
padding:10px 10px;
color:#fff;
}
#nav li#mini-logo{
display:none;
font-weight:bold;
}
诀窍是获取我们的位置,#nav
如果位置小于 ,则滚动页面会做一些事情window scrollTop
。
为了达到那种平滑的效果,你必须确保你有一个替换元素,#nav
一旦我们设置它的位置fixed
来防止“跳跃”效果。
该元素是与子元素具有相同高度nav
的父元素。#navigation
这就是您正在寻找的滚动部分
http://pmbennett.net/2010/02/09/fixed-scrolling-navigation/
淡入徽标只需使用: http ://api.jquery.com/fadeIn/
在 else { } 内