Question

我正在使用bootstrap的词缀插件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;
}

我该如何解决这个问题？

Answer 1

试试这个：

使用affix类

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

现在它不会跳！

滚动时防止粘贴元素的跳跃

1 个答案: