Is there a way to "push" a div below the first fold so that it never shows up on page load unless the user scrolls down? I know there is something called Jquery viewport but not sure how to use it. I don't want the DIV to be "hidden" with CSS either.
You don't need any javascript! Just good 'ole CSS. Set the element that is a child of the <body>
to position:absolute; top:100%;
and you've got your below-the-fold-element.
.below {
position: absolute;
top:100%;
}
Plus, unlike setting a static top or margin with javascript, this will work even after you resize your browser window.
Here's a jsFiddle with the full markup: http://jsfiddle.net/ubhBL/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With