Javascript 将Div改为“；捕获；滚动时位于页面顶部

我在一个网站上有一个标题，该标题位于页面顶部，固定为20px

但是，我希望它在滚动时能够占据页面的顶部，并在用户向下滚动20px后固定在屏幕的顶部

CSS

---

我想需要某种形式的JavaScript，但几乎没有JavaScript经验，因此任何帮助都将不胜感激。

只需聆听

滚动
事件并读取
$（窗口）的值。滚动顶部（）
，然后根据该值设置
顶部
。

比如：

$(window).on('scroll', function() {
    $('#header').css('top', $(window).scrollTop() > 20 ? '0px' : '20px');
});

当窗口滚动时，
scroll
事件会告诉您。然后，使用
scrollTop
查看距离
0
的距离：

$(window).on("scroll", function() {
  $("#header").css("top", Math.max(0, 20 - $(window).scrollTop()));
});


或者为了避免不断地重新创建对象：

(function() {
  var $wnd = $(window),
      $header = $("#header");
  $wnd.on("scroll", function() {
    $header.css("top", Math.max(0, 20 - $wnd.scrollTop()));
  });
})();

我就是这样使用jQuery的。
出于性能原因，该位置也被缓存：

这是一把小提琴：


使用CSS可以设置固定位置：

.fixed #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%
}

还要记住，当收割台到达固定位置时，收割台的20px将丢失。因此，可以添加主体填充，例如：

.fixed {
    padding-top: 20px;
}

或者您添加一个20像素高的元素，并根据主体中的.fixed类交换显示无/块
能否请您发布一份您当前拥有的内容的JSFiddle，以便人们可以解决该问题。将来，我们可以使用
位置：sticky
（）。然而，目前的支持率很低（）。这非常有效。非常感谢您，很抱歉使用了Java/Javascript@如果你把中间的主线改为<代码> $（'*标题），CSS（'Top'，Max.Max（0, 20 -$（window）.SCROLLTOP（）））；代码>，它将是平滑的，而不是突然弹到顶部。（）您可能还希望避免不断地重新创建这些对象，滚动的情况经常发生。Cheers T.J.现在切换到您的版本。谢谢你的帮助。Andy@AndyKing：很高兴这有帮助。当然，您可以自由更改已接受的答案。；-）
.fixed #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%
}

.fixed {
    padding-top: 20px;
}