Question

而不是position:fixed，这个小插件是一个 crossbrowser 实验，用于将absolute定位元素设置到页面底部。
它有效。（IE6,7,8 / MOZ / Saf，Mob.Safari533.1 / O / ...）差不多。

“唯一”问题是当页面滚动时 - ＆gt; div摇了摇。

我是否需要将某些setInterval（）或setTimeout（）或某些东西绑定到.scroll（）事件？

有什么想法吗？有什么建议吗？提前谢谢！

插件：

(function($) {
    $.fn.jFooter = function() {    
        var footer = this;        
        var fooH = footer.outerHeight();    

        function setFooPos() {        
            winH = $(window).height();
            winS = $(window).scrollTop();
            tot = (winH - fooH)+winS;

            footer.css({
                position: 'absolute',
                top: tot + 'px'
            });     
        }
        // a div to compensate the scroll start:
        $('body').append('<div id="fC" style="position:relative;height:'+ fooH +'px;width:100%;clear:both;"/>');

        setFooPos();
        $(window).bind('scroll resize',function () {
            setFooPos();
        });
    };
})(jQuery);

Answer 1

我很确定震动是不可避免的。由于您必须将顶部基于scrollTop，因此DOM必须触发事件，javascript引擎必须解析javascript，然后更新DOM。

震动是DOM更新的延迟，以及position:fixed存在的全部原因。

据我所知，原因位置：fixed是平滑的，因为position：fixed元素不必重绘，或者至少在页面滚动时重新渲染。这种跳跃的原因是因为你不止一次重绘屏幕，一次用于滚动，一次用于位置更新。

Answer 2

由于这是一个更好，更简单的解决方案，我建议检测position:fixed支持并使用它（如果可用）。如果不可用，请添加throttled延迟以在用户停止或暂停滚动时重新定位页脚。它不漂亮，但它比摇摆更好（这是无法避免的，afaik）：

$(window).bind('scroll resize',function () {
  $.throttle( 500, setFooPos );
});

防止绝对pos。滚动时页脚div抖动

2 个答案: