StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>An alternative to all of this jQuery slideUp/slideDown is to use CSS to handle it.</p> <p>We detect when the user has reached your <code>#showfootershop</code> element and then add or remove a class from the footer:</p> <pre><code>$(window).scroll(function() { var distanceTop = $('#showfootershop').offset().top - $(window).height(); if($(document).scrollTop() >= distanceTop) $('#footershop').addClass("show"); else $('#footershop').removeClass("show"); } </code></pre> <p>Then we use CSS to display the footer or hide it depending on the presence of that class:</p> <pre><code>#footershop { position: fixed; height: 0px; z-index:999; bottom: 0; overflow:none; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; } #footershop.show { height:35px; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; } </code></pre> <p>As you can see above when the <code>.show</code> class is on the footer we change the height of the footer element to display it. CSS transitions are then used to animate this change.</p> <p>The nice thing about this method is it's very lightweight and efficient (especially if you've got a lot of jQuery animations working at the same time), and you can easily animate various different changes like the opacity, text and background colours, etc. without needing to touch your JS at all.</p> <h1>jsFiddle</h1> <p>Here's your jsFiddle modified <a href="http://jsfiddle.net/DigitalBiscuits/8PUa9/29/" rel="nofollow">http://jsfiddle.net/DigitalBiscuits/8PUa9/29/</a></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