Question

向下滚动页面时，右/左面板（包括面板中的所有块）也会上升。有些网站的功能是，在到达网站顶部后，右侧或左侧面板中的一个区块会冻结，并且不会进一步上升。它是使用CSS还是什么完成的？一个例子是Gmail。在Gmail中打开一个长对话，向上和向下滚动并注意右侧面板。滚动页面时，请注意电子邮件会话顶部的按钮。

Answer 1

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

Answer 2

实际上我已经通过页面上的一小块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' : '');
});

我没有听说有人在没有JS的普通CSS上创建了相同的功能

Answer 3

是的......您可以使用position:fixed;

执行此操作

Look this link

Answer 4

是的，您可以通过使用CSS功能位置轻松完成：固定并使用顶部或底部设置该块的位置：0px和左或右0px：

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

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

你可以根据自己的要求设置正确和顶级。

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

4 个答案: