当浮动框移动到浏览器边缘时，跟随一起滚动

页面效果

        

JS代码

$.fn.smartFloat = function() { 
    var position = function(element){    
        var abLeft=$(element).css("left"); //当为ablute时的left相对初始值
        var fixeLeft=$(element).offset().left+"px"; //在整个页面的绝对值
        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,
                        left:fixeLeft
                    });
                } else {
                    element.css({
                        top: scrolls
                    });    
                }
                               
            }else {
                element.css({
                    position: pos,
                    top: top,
                    left:abLeft
                });    
            }
        });
};
    return $(this).each(function() {
        position($(this));                         
    });
};

html触发方法

<script type="text/javascript">

     $(".count-box").smartFloat();

</script>

 

 

 

注意：IE6下面浮动框滚动的效果不是很平滑，最好不跟谁一起滚动

 

 

 

 

转载于:https://www.cnblogs.com/guanxiaoqing/archive/2013/04/15/3022078.html