仿淘宝悬浮顶部工具栏之方法二改进

最新推荐文章于 2021-12-24 08:59:40 发布

芳踪_若梦

最新推荐文章于 2021-12-24 08:59:40 发布

阅读量1.1k

点赞数

分类专栏：技术文章标签： jquery js

本文链接：https://blog.csdn.net/u011681370/article/details/15987579

版权

技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

方法二：采用Jquery

1.首先引入Jquery.js

2.页面定义一个div，里面放置工具栏：

3.定义一个悬浮的css样式：

//在这里不设置其距离左边的位置，动态获取

.navFix{background:#FFF; position:fixed; top:0px;width:100%; _position:absolute; top:expression((offsetParent.scrollTop)+0); z-index:2;}
</style>

4.再写一个方法使滚动到一定位置控制其悬浮：

/**

$(document).ready(function(){
var headHeight=200; //这个高度其实有更好的办法的。使用者根据自己的需要可以手工调整。

var nav=$(".y_bds");
$(window).scroll(function(){

if($(this).scrollTop()>headHeight){
nav.addClass("navFix");
}
else{
nav.removeClass("navFix");
}
})
})

**/

$(document).ready(function(){
var nav=$(".y_bds");
var position = nav.position();
var divTop = nav.position().top;//获取其top值
var divLeft = nav.position().left;//获取left值
$(window).scroll(function(){
if($(this).scrollTop()>divTop){
nav.addClass("navFix");
nav.css({'left':divLeft}); //设置其距离左边的位置
}
else{
nav.removeClass("navFix");
}
})
})

简单例子如demo2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>仿淘宝智能浮动的工具条 - LIEHUO.NET</title>
<style type="text/css">
.navFix{background:#FFF; position:fixed; top:0px;width:100%; _position:absolute; top:expression((offsetParent.scrollTop)+0); z-index:2;}
</style>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
 
<script >
$(document).ready(function(){ 
var nav=$(".y_bds"); 
var position = nav.position();
var divTop = nav.position().top;//获取其top值
var divLeft = nav.position().left;//获取left值
$(window).scroll(function(){ 
if($(this).scrollTop()>divTop){ 
nav.addClass("navFix");
nav.css({'left':divLeft}); //设置其距离左边的位置
} 
else{ 
nav.removeClass("navFix"); 
} 
}) 
})
</script>
</head>
<body>
<div style="height:300px;background:#eee"></div> 
<div class="y_bds" style="clear:both;">
 要注意两点，一个是style clear:both,另一个就产class=y_bds
</div>
<div style="height:1000px;background:#eee"></div> 
</body>
</html>