jquery实现页面滚动时层智能浮动定位

css：

#wziliao{position: absolute;}

js:

 1 $.fn.smartFloat = function() {
 2     var position = function(element) {
 3         /*position() 方法返回匹配元素相对于父元素的位置（偏移）;
 4         该方法返回的对象包含两个整型属性：top 和 left，以像素计;
 5         此方法只对可见元素有效。
 6         scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置;
 7         该方法对于可见元素和不可见元素均有效。*/
 8         var top = element.position().top,
 9             pos = element.css("position");
10         //console.log(top);
11         $(window).scroll(function() {
12             var scrolls = $(this).scrollTop();
13             //console.log(scrolls);
14             if (scrolls > top) {
15                 if (window.XMLHttpRequest) { //除了IE6外的其他浏览器都支持原生的XHR对象 position: "fixed"
16                     element.css({
17                         position: "fixed",
18                         top: 0
19                     });
20                 } else { //IE6下不设置，及为样式定义的 position: "absolute"
21                     element.css({
22                         top: scrolls
23                     });
24                 }
25             } else {
26                 element.css({
27                     position: pos,
28                     top: top
29                 });
30             }
31         });
32     };
33     return $(this).each(function() {
34         position($(this));
35     });
36 };
37 //使用
38 $(function(){
39     $("#wziliao").smartFloat();
40 });

 

参考

http://www.wufangbo.com/jquery-scroll-position-fixed/

http://www.helloweba.com/view-blog-194.html

转载于:https://www.cnblogs.com/wsxiaogao/p/3421443.html