Javascript 如何在滚动页面时冻结到达窗口顶部的div面板

向下滚动页面时，包括面板中所有块的右/左面板也会向上滚动。一些网站有一个功能，在到达网站顶部后，右面板或左面板中的一个块冻结，不再向上移动。是用CSS还是怎么做的？

---

Gmail就是一个例子。在Gmail中打开一个长对话，上下滚动，注意右边的面板。当您滚动页面时，请注意电子邮件对话顶部的按钮。

是。。。您可以使用

位置：fixed

是的，您可以使用CSS功能position:fixed轻松完成此操作，还可以使用top或bottom:0px和left或right 0px:

<div id="float_bar"></div>

#float_bar{position:fixed;right:0px;top:10px}


#浮动条{位置：固定；右侧：0px；顶部：10px}

您可以根据您的需求设置右键和右键。
您想要的功能需要Javascript。在Drupal中，可以通过安装浮动块模块来实现此功能。请看
实际上，我是通过页面上的一小段JS来完成的。这里可以找到一个明确的例子，通常，一旦要冻结的面板到达页面顶部，您需要动态应用
position:fixed
CSS样式。JQuery为
scroll
事件提供了处理程序，可以帮助您完成这项工作

var rightpane = $('#rightpane');

// this gets the top offset of the div on the document
var start = $(rightpane).offset().top;

$.event.add(window, "scroll", function() {

// the number of pixels that are hidden from view above the scrollable area
  var p = $(window).scrollTop();

  $(rightpane).css('position',((p)>start) ? 'fixed' : '');

  // at the top of the screen (0 px offset) if scrolled
  $(rightpane).css('top',((p)>start) ? '0px' : '');
});

我还没听说有人在没有JS的纯CSS上创建了相同的功能。看起来这一个和你想做的一样：也许你说的是CSS位置固定，也许是Javascript。你能提供这些网站的链接吗？我不是说css的位置：固定。因为在这种情况下，div总是固定在那里。在我的情况下，我希望div应该随页面移动。但一旦它到达屏幕顶部，它就不应该再向上移动，并且始终可见。Gmail就是一个例子。在Gmail中打开一个长对话，上下滚动，注意右边的面板。当你滚动页面时，请注意邮件对话顶部的按钮。我不是说位置：固定。此外，在示例脚本中，您需要使用#float_bar而不是.float_bar。但是我还没有得到问题的答案。人们已经忘记了这个问题。我有没有办法再次引起人们对这个问题的注意。我仍然有这个问题。这正是我想要的。我需要弄清楚如何在Drupal之外实现这个功能。你的回答有点晚，只延迟了3年。但是你的努力还是值得赞赏的，你的回答很有意义，看起来你理解了这个问题。是的……互联网上完全没有关于如何做到这一点的信息——只有这个问题。因此，当我试图做类似的事情时，我决定发布答案：）