How can I make a div disappear when scrolling down 100px from the top?

Question

I want to make a div disappear when I scroll down 100px and then reappear when within those 100px again from the top of the browser window. I don't want any animations just want it to vanish and reappear. Can this be done in just HTML and CSS? Can someone provide me the code for this please?

Thanks in advance, Matt

Answer 1

You wont be able to do this in pure HTML or CSS, you'll need to resort to Javascript, your best bet is likely jQuery- as such it can be relatively easy to do this using:

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 100) {
         $('#myDivId').hide();
     }
     else {
         $('#myDivId').show();
     }
});