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

css：

#wziliao{position: absolute;}

js:

$.fn.smartFloat = function() {
    var position = function(element) {
        /*position() 方法返回匹配元素相对于父元素的位置（偏移）;
        该方法返回的对象包含两个整型属性：top 和 left，以像素计;
        此方法只对可见元素有效。
        scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置;
        该方法对于可见元素和不可见元素均有效。*/
        var top = element.position().top,
            pos = element.css("position");
        //console.log(top);
        $(window).scroll(function() {
            var scrolls = $(this).scrollTop();
            //console.log(scrolls);
            if (scrolls > top) {
                if (window.XMLHttpRequest) { //除了IE6外的其他浏览器都支持原生的XHR对象 position: "fixed"
                    element.css({
                        position: "fixed",
                        top: 0
                    });
                } else { //IE6下不设置，及为样式定义的 position: "absolute"
                    element.css({
                        top: scrolls
                    });
                }
            } else {
                element.css({
                    position: pos,
                    top: top
                });
            }
        });
    };
    return $(this).each(function() {
        position($(this));
    });
};
//使用
$(function(){
    $("#wziliao").smartFloat();
});

 

参考

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

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