滚动网页时保持头部静止不动的实现方法

想让头部导航一直显示,也就是当滚动网页时,保持头部静止不动?试试下面给出的方法吧。

//html

<div id="uberbar"><a href="#top">Top of Page</a>
<a href="#bottom">Bottom of Page</a>
</div>

//css

#uberbar {
border-bottom:1px solid #eb7429;
background:#fc9453;
padding:10px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}

//jquery

$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position &gt; topDistance &amp;&amp; !inside) {
//add events
topbarML();
$('#uberbar').bind('mouseenter',topbarME);
$('#uberbar').bind('mouseleave',topbarML);
inside = true;
}
else if (position &lt; topDistance){
topbarME();
$('#uberbar').unbind('mouseenter',topbarME);
$('#uberbar').unbind('mouseleave',topbarML);
inside = false;
}
});
})();
});
赞 (0)

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. XX你ie不行回复
    • 文夕❓ 我也不是很懂的说...回复