jquery滚动到导航后悬浮停止页面顶部 兼容ie6
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 本文章来给各位同学详细介绍一款jquery滚动到导航后悬浮停止页面顶部 兼容ie6实例代码，有需要了解的朋友可参考。...
|
jquery实现方法
| 代码如下 |
复制代码 |
|
<script type="text/javascript">
$(function(){
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
var handler,sTop,dTop;
dTop = $("#fixedNav").offset().top
$(window).bind('scroll',function(){
window.clearTimeout(handler);
handler = window.setTimeout(function(){
sTop = $(document).scrollTop();
sTop > dTop ? $("#fixedNav").css("top",sTop - dTop) : $("#fixedNav").css("top",0);
$("#fixedNav").css({"position":"relative","z-index":"1200"});
},60);
});
}else{
var topMain= $("#fixedNav").offset().top
$(window).scroll(function(){
if ($(window).scrollTop()>topMain){
$("#fixedNav").addClass("nav_scroll");
}else{
$("#fixedNav").removeClass("nav_scroll");
}
});
}
});
</script>
|
css代码
| 代码如下 |
复制代码 |
|
.nav_scroll{ position:fixed;top:0;left:0;z-index:1200; width:100%;}
|
html
| 代码如下 |
复制代码 |
|
<div id=fixedNav>jquery实现滚动到导航后悬浮停止页面顶部 兼容ie6,这里面放内容</div>
|
下面附一段js代码
| 代码如下 |
复制代码 |
|
<script type="text/javascript">
function htmlScroll()
{
var top = document.body.scrollTop || document.documentElement.scrollTop;
if(elFix.data_top < top)
{
elFix.style.position = 'fixed';
elFix.style.top = 0;
elFix.style.left = elFix.data_left;
}
else
{
elFix.style.position = 'static';
}
}
function htmlPosition(obj)
{
var o = obj;
var t = o.offsetTop;
var l = o.offsetLeft;
while(o = o.offsetParent)
{
t += o.offsetTop;
l += o.offsetLeft;
}
obj.data_top = t;
obj.data_left = l;
}
var oldHtmlWidth = document.documentElement.offsetWidth;
window.onresize = function(){
var newHtmlWidth = document.documentElement.offsetWidth;
if(oldHtmlWidth == newHtmlWidth)
{
return;
}
oldHtmlWidth = newHtmlWidth;
elFix.style.position = 'static';
htmlPosition(elFix);
htmlScroll();
}
window.onscroll = htmlScroll;
var elFix = document.getElementById('fixedRight');
htmlPosition(elFix);
</script>
|
|
