防止贴元素的跳跃滚动

当我使用自举的词缀插件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

防止贴元素的跳跃滚动

回答

相关问题