3

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.

Raouf Athar
  • 1,803
  • 2
  • 16
  • 30
  • Look like this one is the same as you are trying to do: http://stackoverflow.com/questions/1638895/how-do-i-make-a-div-move-up-and-down-while-scrolling-the-page – El Guapo Sep 15 '11 at 19:16
  • Maybe you are talking about CSS position fixed, maybe Javascript. Can you provide links to such websites? – Y.A.P. Sep 15 '11 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 Sep 15 '11 at 19:22

4 Answers4

2

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

xenn_33
  • 855
  • 1
  • 10
  • 25
  • 1
    You answered a bit late with a delay of just 3 years. But still your effort is appreciated and your answer makes sense and it looks like you understood the question. – Raouf Athar Sep 02 '14 at 06:47
  • Yeah… there was completely no information on the Internet how to do that – only this question. So as I was trying to do something similar I decided to post the answer :) – xenn_33 Sep 02 '14 at 07:24
1

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

Yasin Okumuş
  • 2,299
  • 7
  • 31
  • 62
Anand Nair
  • 11
  • 1
0

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

Look this link

Marcus Sá
  • 608
  • 3
  • 8
0

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.

Sahil Grover
  • 1,862
  • 4
  • 26
  • 57
  • I am not talking about the position:fixed. Futher, you need to use #float_bar instead of .float_bar in your example script. – Raouf Athar Sep 15 '11 at 19:28
  • But I did not yet get the answer to my question. People have forgot this question. Is there any way I can again get people's attention to this question. I still have this problem. – Raouf Athar Oct 04 '11 at 10:04