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

  先看效果：

   

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

方法一（顶部）

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

     实现：position:fixed; top:0

方法二（顶部）

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

     实现：

window.onscroll=function (){

     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);}