防止絕對位置。頁腳動態滾動

而不是position:fixed，這個小插件是crossbrowser實驗將absolute定位元素設置到頁面的底部。
它的工作原理。（IE6,7,8/MOZ/Saf，Mob.Safari533.1/O/...）差不多。防止絕對位置。頁腳動態滾動

的「唯一」的問題是，當頁面滾動 - >股利抖動。

我是否需要綁定到.scroll（）事件一些setInterval（）或setTimeout（）什麼的？

任何想法？任何建議？在此先感謝！

插件：

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

來源

2011-06-29 Roko C. Buljan

我敢肯定的是，抖動是不可避免的。由於必須將頂部放在scrollTop上，所以DOM必須觸發事件，JavaScript引擎必須解析javascript，然後更新DOM。

的搖晃是被更新的DOM的延遲，而且整個原因，position:fixed存在。

據我所知，理由位置：固定光滑是因爲位置是：固定元素沒有被重畫，或者在頁面滾動至少重新呈現。這種跳轉的原因是因爲您不止一次地重畫屏幕，一次滾動，一次更新位置。

來源

2011-06-29 19:39:36 timw4mail

+1謝謝你這個很好的答案！ –

由於它是一個更好更簡單的解決方案，我建議檢測position:fixed支持和使用，如果可用。如果不可用，請在用戶停止或停止滾動時添加throttled延遲以使頁腳重新定位。這不是漂亮，但它比搖擺（這是不可避免的，afaik）更好：

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

來源

2011-06-29 19:48:51 glortho

+1感謝您的解釋和鏈接 –

防止絕對位置。頁腳動態滾動

回答

相關問題