Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Push DIV below first fold? Jquery?

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.

like image 548
MayurOnWordpress Avatar asked Dec 17 '22 04:12

MayurOnWordpress


1 Answers

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/

like image 189
rgthree Avatar answered Dec 18 '22 18:12

rgthree