最近需要做一个侧边固定的导航栏,需要做到
- 默认情况下,导航栏不是固定的
- 只有当页面滚动,会遮盖住导航栏的时候,导航栏才是固定的
- 页面缩放的时候,固定导航栏位置会根据页面的大小调整
<div class="nav">
<div class="title">
<label>导航栏</label>
</div>
<ul class="nav-title">
<li>
<a href="javascript:;">1</a>
</li>
<li>
<a href="javascript:;">2</a>
</li>
<li>
<a href="javascript:;">3</a>
</li>
</ul>
</div>
css就不贴了。。。主要是js
(function(){
var $nav = $(".nav");
var top;
var left;
// 计算位置,并更新坐标
function calPosition(){
$nav.css({position: "static"});
top = $nav.offset().top;
left = $nav.offset().left;
fixNav();
}
calPosition();
// 右侧导航栏固定位置
function fixNavigation (){
if(document.body.scrollTop > top - 10) {
$nav.css({position: "fixed", left: left, top: 10});
} else {
$nav.css({position: "static"});
}
}
// 滚动的时候,检查是否固定位置
$(window).scroll(function(){
fixNavigation();
});
// 当窗口大小改变的时候,还原为static,重新计算位置
$(window).resize(function(){
calPosition();
});
})(jQuery);
很简单,通过static position的时候,获取导航栏在页面上的位置(top和left值),然后一旦需要fix position的时候,用之前获取的位置进行定位。