Question

我有一个与页面滚动的html div元素，但是我希望它从屏幕顶部达到50px后固定... 这是怎么做的？
我的div是#box
谢谢！
-INA

Answer 1

如果您希望将其固定在距离顶部一定距离的页面顶部，则可以检查元素的顶部偏移量，并在达到所需距离时更改类别。

以下是您参考的jquery代码

123.

你需要更具体地了解到目前为止你做了什么。例如，如何使div元素在页面内滚动。使用css或js / jquery动画功能？这将有助于我们提供更具体的答案。

**根据你的小提琴编辑。

Answer 2

他们是对的，这个问题是重复的。这是我用论坛的答案制作的代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>
  <nav>
    <!-- define content to display at `data-*` -->
    <a href="#" data-content="<p>A<a href='#abc'>abc</a></p>">a</a> 
    <a href="#" data-content="<div>B</div>">b</a>
    <a href="#" data-content="<h2>C</h2>">c</a>
    <a href="#" data-content="<mark>D</mark>">d</a>
    <a href="#" data-content="<img src='' alt='E' style='background:gold;width:50px;height:50px;'>">e</a>
    <a href="#">f</a>
    <a href="#" data-content="<h1>G</h1>">g</a>
  </nav>
  <div class="bg"></div>
  <div class="content"></div>
  <div class="bg"></div>
  <div id="abc">123</div>
</body>

希望它无论如何都有帮助。

https://jsfiddle.net/ay54msd5/1/

Answer 3

尝试这样的事情。这是一个使用jquery（希望不是问题）的解决方案，每次页面滚动时都会检查页面的scrollHeight。如果scrollHeight大于某个阈值，则该元素将变为固定。如果没有，元素相对定位（但在这种情况下你可以做任何你想做的事。

$(document).ready(function() {
  var navFixed = false;
  var $box = $("#box");
  var topHeight = 50;

  $(document).scroll(function() {
    if ($(document).scrollTop() >= topHeight && !navFixed) {
      $box.css("position", "fixed");
      navFixed = true;
    }
    else if ($(document).scrollTop() < topHeight && navFixed) {
      $box.css("position", "relative");
      navFixed = false;
    }
  });
});

您必须编写一些针对#box元素的额外CSS，告诉它您希望将其固定到哪个坐标。

如何从屏幕顶部50px时使元素固定

3 个答案: