javascript - How to freeze a div panel as it reaches top of the window while scrolling a page - Stack Overflow

admin管理员组

文章数量:1415111

When you scroll a page down, the right/left panel including all blocks in the panels go up too. Some websites have a feature that after reaching the top of the website, one block in the right or left panel freezes and does not go up further. Is it done using CSS or what? An example is Gmail. Open a long conversation in Gmail, scroll up and down and notice the right panel. Also notice the buttons on top of the email conversation as you scroll the page.

When you scroll a page down, the right/left panel including all blocks in the panels go up too. Some websites have a feature that after reaching the top of the website, one block in the right or left panel freezes and does not go up further. Is it done using CSS or what? An example is Gmail. Open a long conversation in Gmail, scroll up and down and notice the right panel. Also notice the buttons on top of the email conversation as you scroll the page.

• javascript
• html
• css

Share Improve this question Follow edited Sep 6, 2014 at 8:17 Raouf Athar asked Sep 15, 2011 at 19:14 Raouf AtharRaouf Athar 1,81322 gold badges1616 silver badges3030 bronze badges 3

• Look like this one is the same as you are trying to do: stackoverflow./questions/1638895/… – El Guapo Commented Sep 15, 2011 at 19:16
• Maybe you are talking about CSS position fixed, maybe Javascript. Can you provide links to such websites? – Y.A.P. Commented Sep 15, 2011 at 19:18
• I am not talking about css position:fixed. because in that case the div is always fixed there. In my case I want the div should move along with the page. But as soon as it reaches the top of the screen, it should not move further up and stay visible always. an example is Gmail. Open a long conversation in Gmail, scroll up and down and notice the right panel. Also notice the buttons on top of the email conversation as you scroll the page. – Raouf Athar Commented Sep 15, 2011 at 19:22

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Actually I’ve done that via a small piece of JS on the page. The definitive example could be found here http://viralpatel/blogs/scroll-fix-header-jquery-facebook/ In general you need to apply the position:fixed CSS style dynamically once the panel you want to freeze reaches the top of the page. JQuery helps you with that providing the handler for the scroll event

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' : '');
});

I haven't heard that anyone created the same functionality on plain CSS without JS

The feature you want requires Javascript. In Drupal, this functionality can be implemented by installing the Floating Block Module. See http://drupal/project/floating_block

Yes... You can do it with the position:fixed;

Look this link

Yes you can easily do that by using the CSS feature position:fixed and also set the location of that block by using top or bottom:0px and left or right 0px:

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

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

you can set right and top accordignly ur requirement.

本文标签： javascriptHow to freeze a div panel as it reaches top of the window while scrolling a pageStack Overflow