如何在滚动页面时固定一个 div 面板，使其到达窗口顶部时停止滚动

Question

当您向下滚动页面时，右侧/左侧面板以及面板中的所有块也会向上移动。一些网站具有特性，在到达网站顶部后，右侧或左侧面板中的一个块会冻结并且不会再向上移动。这是通过CSS实现的吗？ Gmail就是一个例子。在Gmail中打开一封长邮件，向上和向下滚动时请注意右侧面板。同时还要注意随着页面滚动而出现在电子邮件对话框顶部的按钮。

- Raouf Athar

---

看起来这个跟你试图做的一样：https://dev59.com/hHI-5IYBdhLWcg3w3cg8 - El Guapo

也许你在谈论CSS的固定定位，或者是Javascript。你能提供这些网站的链接吗？ - Y.A.P.

我并不是在谈论css position:fixed。因为这种情况下，div总是固定在那里。在我的情况下，我希望div应该随着页面移动而移动。但是一旦它到达屏幕顶部，就不应再向上移动并始终保持可见。一个例子是Gmail。在Gmail中打开一条长对话，上下滚动并注意右侧面板。同时，当您滚动页面时，请注意电子邮件对话框顶部的按钮。 - Raouf Athar

Answer 1

实际上，我已经通过页面上的一小段JS完成了这个。具体的示例可以在这里找到 http://viralpatel.net/blogs/scroll-fix-header-jquery-facebook/ 通常情况下，当您想要冻结的面板到达页面顶部时，您需要动态应用 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' : '');
});

我没有听说过有人在不使用JavaScript的情况下使用纯CSS创建相同的功能。

- xenn_33

---

您回答有些晚，延迟了3年。但是我们仍然感谢您的努力，并且您的回答很有意义，看起来您理解了这个问题。 - Raouf Athar

是的...在互联网上完全没有关于如何做到这一点的信息 - 只有这个问题。因此，当我尝试做类似的事情时，我决定发布答案 :) - xenn_33

Answer 2

您想要的功能需要使用Javascript。在Drupal中，可以通过安装Floating Block模块来实现此功能。请参见http://drupal.org/project/floating_block

- Anand Nair

---

这正是我想要的。我需要弄清楚如何在Drupal之外实现这个功能。 - Raouf Athar

Answer 3

你可以轻松地使用CSS功能position:fixed来实现这一点，还可以通过使用top或bottom:0px和left或right 0px来设置该块的位置：

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

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

您可以根据您的需求设置正确和顶部。

- Sahil Grover

---

我不是在谈论position:fixed。此外，在你的示例脚本中，你需要使用#float_bar而不是.float_bar。 - Raouf Athar

但是我还没有得到我的问题的答案。人们已经忘记了这个问题。有没有办法让人们再次关注这个问题。我仍然有这个问题。 - Raouf Athar

Answer 4

是的...你可以使用position:fixed;来实现。

看这个链接

- Marcus Sá