All geek questions in one place

Press DIV below first fold? Jquery

Is there a way to “click” a div below the first fold so that it never appears when the page loads, unless the user scrolls down? I know there is something called jQuery viewport, but not sure how to use it. I do not want the DIV to be “hidden” with CSS.

+4
source share
2 answers

You do not need javascript! Just good CSS. Set the element to be a child of <body> , position:absolute; top:100%; position:absolute; top:100%; and you have the below-fold element.

 .below { position: absolute; top:100%; }

Also, unlike setting a static top or field using javascript, this will work even after resizing your browser window.

Here's jsFiddle with full markup: http://jsfiddle.net/ubhBL/

+10
source

How about using jQuery to set the CSS top or margin-top property for your element, which is equal to the height of the viewport :

 $(function () { $('#my-under-the-fold-element').css({ top : $(window).height() }); });

Then you just need to make your element absolutely positioned.

Here is a demo: http://jsfiddle.net/CtgUB/2/

+2
source

Source: https://habr.com/ru/post/1392752/

More articles:


All Articles