Broadbiz Broadbiz - 5 months ago 85
jQuery Question

Position Fixed Div to Disappear when scrolled to a certain point

I would like to know how I would code the following from this website: http://www.enesco.co.uk/

If you go there, you will see a green bar at the bottom of the screen. This is fixed but as you scroll down and get to the bottom it then becomes an object which is part of the footer.

How would this be coded? I have tried a couple of things but to no success, this needs to be able to work on mobile aswell, my site is using Opencart/Bootstrap

Thanks

Answer

Rough draft of what you'll need. Basically you need to have your footer bar fixed until a certain height, then change it to position: relative. To get the dynamic value of the window height you'll have to check that height onscroll and subtract it from the offset.top of your main footer. See details and fiddle below.

JsFiddle

Javascript:

$(document).ready(function () {
            window.onscroll = scrollFunction;
            function scrollFunction() {
                var offset = $('.footer').offset();
                //subtract window height from footer offset.top
                //add 40 for footer height
                var footerChange = offset.top - $(window).height() + 40; 
                var doc = document.documentElement, body = document.body;
                var top = (doc && doc.scrollTop || body && body.scrollTop || 0);
                if (top > footerChange) {
                    $('.footerTop').css('position', 'relative');
                }
                else {
                    $('.footerTop').css('position', 'fixed');
                }
            }
        });

HTML:

<div class="footer">
<div class="footerTop">
FOOTER FIXED
</div>
footer info<br/>
footer info<br/>
footer info<br/>
footer info<br/>
footer info<br/>
footer info<br/>
footer info<br/>
</div>

CSS:

.footerTop
{
  background: green;
  height: 40px;
  position: fixed; 
  bottom: 0;
  width: 100%;
}

EDIT: Just found this plugin as well, which would have been a bit quicker: http://stickyjs.com/