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

Question

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.

Answer 1

Actually I’ve done that via a small piece of JS on the page. The definitive example could be found here http://viralpatel.net/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

Answer 2

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

Answer 3

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.

Answer 4

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

Look this link