JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)

  阅读前提：充分理解div的三种定位方式：浮动，相对定位，绝对定位

方法一（顶部）

     原理：直接使用css 进行控制；缺点：不兼容ie6-；

     实现：position:fixed; top:0

方法二（顶部）

     原理:获取页面被卷曲的高度(LEN)，复制给 obj.STYLE.TOP=LEN，缺点，效果不是很流畅！

     实现：

     var len=document.documentElement.scrollTop||document.body.scrollTop;

     var obj=document.document.getElementById("id")

     obj.style.top=len     

方法三（各种部位）

         这是在网上找的jq方法，自己也实际动手写了一遍；

$.fn.smartFloat = function() {     var position = function(element) {         var top = element.position().top;         var pos = element.css("position");         $(window).scroll(function() {            var scrolls = $(this).scrollTop();             if (scrolls > top) {                 if (window.XMLHttpRequest) {                     element.css({                         position: "fixed",                         top: 0                     }).addClass("shadow");                 } else {                     element.css({                         top: scrolls                     });                     }             }else {                 element.css({                     position: pos,                     top: top                 }).removeClass("shadow");            }         });     };     return $(this).each(function() {         position($(this));                              }); }; 

调用

$(function(){     $("#nav").smartFloat(); }); 

ps:边框加阴影的css代码；

.shadow{-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px  rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}