StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Use two functions for slidingUp and slidingDown, and toggle them once you have shown the slider and hidden it alternatively.</p> <pre><code>$(function() { var slideUp = function() { if ($(window).scrollTop() + $(window).height() >= $(document).height()) { console.log('At bottom!!'); //toggle the handlers $("#footershop").slideDown(function() { $(window).off('scroll', slideUp).on('scroll', slideDown); }); } }; var slideDown = function() { if ($(window).scrollTop() + $(window).height() < $(document).height()) { //toggle the handlers $("#footershop").slideUp(function() { $(window).off('scroll', slideDown).on('scroll', slideUp); }); } }; $(window).on('scroll', slideUp); }); </code></pre> <p>EDIT: I think the main problem you have is #footershop increases document.height when it shows and reduces when hidden, which is correct. This causes additional scroll events which creates the undesired behaviour.</p> <p><strike> Check this fiddle: I fixed this partially.</p> <p><a href="http://jsfiddle.net/BuddhiP/8PUa9/8/" rel="nofollow">http://jsfiddle.net/BuddhiP/8PUa9/8/</a> </strike></p> <p>Check this JSBin version for fixed version: <a href="http://jsbin.com/axobow/2" rel="nofollow">http://jsbin.com/axobow/2</a></p> <p>Main thing I did was #footershop is now absolutely positioned, so it doesn't cause the document size to change when shown or hidden, which is important in this case as if document.height() changed it affects you calculation.</p> <p><strike>Although fiddle works as expected, div is not positioned right on bottom. I hope you can fix that.</strike></p> <p>Hope this helps.</p> <p>NOTE: You need to test the fiddle with full-height window, otherwise you will not see the footer sliding up since it shows somewhere in the middle of text.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload