How to make div fixed after you scroll to that div?

Question

How to make a div remain fixed after you scroll to that div? I have a div that is later in a page and you need to scroll to get to that div.

If I use:

.divname {   position: fixed; } 

The div will appear before it should appear normally. Maybe a good example of what I need is second ad on 9gag. If your screen resolution is low enough, you won't see that ad after you load the front page, but after you scroll down, you'll see the second ad and it will remain fixed while you scroll down.

Answer 1

This is now possible with CSS only, see https://stackoverflow.com/a/53832799/1482443

---

In case anyone needs jQuery approach, below is the original answer as it was posted 8 years ago:

I know this is tagged html/css only, but you can't do that with css only. Easiest way will be using some jQuery.

var fixmeTop = $('.fixme').offset().top;       // get initial position of the element  $(window).scroll(function() {                  // assign scroll event listener      var currentScroll = $(window).scrollTop(); // get current position      if (currentScroll >= fixmeTop) {           // apply position: fixed if you         $('.fixme').css({                      // scroll to that element or below it             position: 'fixed',             top: '0',             left: '0'         });     } else {                                   // apply position: static         $('.fixme').css({                      // if you scroll above it             position: 'static'         });     }  }); 

http://jsfiddle.net/5n5MA/2/

Answer 2

This is possible with CSS3. Just use position: sticky, as seen here.

position: -webkit-sticky; /* Safari & IE */ position: sticky; top: 0;