Broadbiz Broadbiz - 1 year ago 263
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:

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


Answer Source

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 of your main footer. See details and fiddle below.



$(document).ready(function () {
            window.onscroll = scrollFunction;
            function scrollFunction() {
                var offset = $('.footer').offset();
                //subtract window height from footer
                //add 40 for footer height
                var footerChange = - $(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');


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


  background: green;
  height: 40px;
  position: fixed; 
  bottom: 0;
  width: 100%;

EDIT: Just found this plugin as well, which would have been a bit quicker:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download