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

方法二：采用Jquery

1.首先引入Jquery.js

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

工具栏

 

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

 

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

 



 

 要注意两点，一个是style clear:both,另一个就产class=y_bds