how can I make a div stick to the top of the screen once it's been scrolled to?

Question

I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page. I know I've seen at least one example of this online but I cannot remember it for the life of me.

Any thoughts?

Answer 1

You could use simply css, positioning your element as fixed:

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

Edit: You should have the element with position absolute, once the scroll offset has reached the element, it should be changed to fixed, and the top position should be set to zero.

You can detect the top scroll offset of the document with the scrollTop function:

$(window).scroll(function(e){ 
  $el = $('.fixedElement'); 
  if ($(this).scrollTop() > 200 && $el.css('position') != 'fixed'){ 
    $('.fixedElement').css({'position': 'fixed', 'top': '0px'}); 
  } 
});

When the scroll offset reached 200, the element will stick to the top of the browser window, because is placed as fixed.

Check this new example.

Answer 2

The info provided to answer this other question may be of help to you, Evan:

http://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling

You basically want to modify the style of the element to set it to fixed only after having verified that the document.body.scrollTop value is equal to or greater than the top of your element.

Answer 3

CMS' answer also does not address the lack of position:fixed support in IE6. Another issue with the question and answers is what happens when a user zooms the text while already on the page. Slashdot.org handles this well, though the IE6 experience is not ideal.

Answer 4

You've seen this example on Google Code's issue page and (only recently) on Stack Overflow's edit page.

CMS's answer doesn't revert the positioning when you scroll back up. Here's the shamelessly stolen code from Stack Overflow:

function moveScroller() {
  var a = function() {
    var b = $(window).scrollTop();
    var d = $("#scroller-anchor").offset({scroll:false}).top;
    var c=$("#scroller");
    if (b>d) {
      c.css({position:"fixed",top:"0px"})
    } else {
      if (b<=d) {
        c.css({position:"relative",top:""})
      }
    }
  };
  $(window).scroll(a);a()
}

<div id="sidebar" style="width:270px;"> 
  <div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px; width:270px"> 
    Scroller Scroller Scroller
  </div>
</div>

<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script> 

And a simple live demo.

Answer 5

The accepted answer works but doesn't move back to previous position if you scroll above it. It is always stuck to the top after being placed there.

  $(window).scroll(function(e) {
    $el = $('.fixedElement');
    if ($(this).scrollTop() > 42 && $el.css('position') != 'fixed') {
      $('.fixedElement').css( 'position': 'fixed', 'top': '0px');

    } else if ($(this).scrollTop() < 42 && $el.css('position') != 'relative') {
      $('.fixedElement').css( 'relative': 'fixed', 'top': '42px');
//this was just my previous position/formating
    }
  });

jleedev's response whould work, but I wasn't able to get it to work. His example page also didn't work (for me).

Answer 6

@chevron36 jleedev's answer does work - just remove the {scroll:false} argument from offset(). That's on jQuery 1.4.1 so perhaps the original code's for an earlier version?

Cheers jleedev!

Answer 7

You can add 3 extra rows so when the user scroll back to the top, the div will stick on its old place:

Here is the code:

if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
    $('.fixedElement').css({'position': 'relative', 'top': '200px'});
}