防止貼元素的跳躍滾動

當我使用自舉的詞綴插件here HTML：
防止貼元素的跳躍滾動

<html> 
    <head> 
    ... 
    <style> 
     h1 { 
     width: 100px; 
     height: 100px; 
     background: green; 
     margin: 0; 
     top: 10px; 
     } 

     h1.affix { 
     top: 8px; 
     } 

     body { 
     padding: 10px; 
     height: 5000px; 
     } 

    </style> 
    </head> 

    <body> 
    <h1 data-spy="affix" data-offset-top="10">yo!</h1> 
    </body> 
</html>

每當我向下滾動了相當大的距離（使用右邊的滾動，而不是鼠標滾動） div跳轉。我怎樣才能防止呢？顯然問題是div在屏幕之外滾動，然後它被應用在一個固定的位置，並向下移動，導致它跳躍。我嘗試使用轉換使其跳得更平滑，但由於某種原因，它不起作用。

h1 { 
    width: 100px; 
    height: 100px; 
    background: green; 
    margin: 0; 
    transition-property: top; 
    transition-duration: 3s; 
}

我該如何解決這個問題？

來源

2014-08-29 AngularInDepth.com

試試這個：

使用affix類

<h1 class="affix">yo!</h1>

現在，它不會跳！

來源

2014-08-30 05:18:45

以這種方式，它不會跳，因爲它變得固定，我的代碼在那裏靜態地定位了「h1」。 – 2014-08-30 07:59:36

我可以知道爲什麼你的'h1'靜態定位。 – 2014-08-30 08:33:59

因爲我希望它在滾動時隨內容一起移動，並且只有在到達頂部時才粘到頂部。這個例子並不是100％的代表，它的頂部已經有'h1'，但是在生產中它不會那樣 – 2014-08-30 09:39:06

防止貼元素的跳躍滾動

回答

相關問題