使固定浮動元素在Firefox和Chrome中平滑滾動

我有一個使用jQuery和CSS在頁面頂部滾動時定位某些內容的腳本。但是，當您滾動時，該條看起來像在晃動，並且它已被固定到Google Chrome和Mozilla Firefox瀏覽器的頂部。爲什麼會這樣呢？使固定浮動元素在Firefox和Chrome中平滑滾動

我希望你能理解我想要描述的東西。如果沒有，請複製並粘貼此代碼與jQuery庫一起看看我的意思：

<style type='text/css'> 
body { 
    height:1000px; 
    margin:0; 
    padding:0; 
} 

#scroller { 
    position:relative; 
    top:60px; 
    width:100%; 
    background:#CCC; 
    height:20px; 
} 
</style> 

<script type='text/javascript'> 
    $(window).load(function() { 
     $(window).scroll(function() { 
      if($(window).scrollTop()>60) { 
       $('#scroller').css('top', $(window).scrollTop()); 
      } 
     }); 
    }); 
</script> 

<div id="scroller">Some controls</div>

來源

2011-08-08 Cosmo Posmo

這裏是設置的例子：http://jsfiddle.net/nwellcome/6PGZE/ – nwellcome

使用此：

$(window).load(function(){ 
    $(window).scroll(function(){ 
     if($(window).scrollTop()>60){ 
      $('#scroller').css('position', 'fixed'); 
      $('#scroller').css('top', 0); 
     } else { 
      $('#scroller').css('position', 'relative'); 
      $('#scroller').css('top', 60); 
     } 
    }); 
});

而不是操作上的時候，一旦它應該停留在頂部設置的「位置」到「固定」並且頂部爲0，那麼它不必等待JavaScript滾動事件觸發來修復位置。

來源

2011-08-08 15:40:23 nwellcome

卡勒姆，它的頁面重繪導致這個速度，它會從不同的瀏覽器到瀏覽器和機器對機器。「固定」技術通過使其在瀏覽器內部而不依賴於JavaScript來解決這個問題。好答案。 –

還有一個jquery插件，照顧這個。下面是一個標題演示，它將標題向上推出，然後停在頁面的頂部。對於你的例子，假裝橫幅不在那裏。

演示：http://jsfiddle.net/ZczEt/

編輯：更新撥弄：http://jsfiddle.net/ZczEt/2180/

用法：

$(document).ready(function() { 
    $('.header').scrollToFixed(); 
});

插件的描述如下：

該插件用於固定元件在頁面頂部，如果該元素將會垂直滾動出視圖，但是，它確實允許元素繼續向左或向右移動水平滾動。

給定一個選項marginTop，一旦垂直滾動到達目標位置，元素將停止垂直向上移動;但是，當頁面向左或向右滾動時，元素仍然會水平移動。一旦頁面向下滾動超過目標位置，元素將恢復到頁面上的原始位置。

此插件已經過Firefox 3/4，Google Chrome 10/11，Safari 5和Internet Explorer 8/9的測試。

插件和來源：https://github.com/bigspotteddog/ScrollToFixed

來源

2011-08-30 04:25:46 bigspotteddog

使固定浮動元素在Firefox和Chrome中平滑滾動

回答

相關問題