Hello all, I have seen all of these sticky footer script and sticky sidebar scripts! what I want is something similar, I have a long page with a footer and then more content below the footer, I would like the page to only show the footer when the content reaches the footer, once the footer shows on the screen, it gets fixed to the bottom so I can keep on scrolling the page and view the "more content" and when scrolling back up, the footer detaches from fixed at the bottom back to normal!

I have attached a screenshot to maybe help explaining it better!

Hello all, I have seen all of these sticky footer script and sticky sidebar scripts! what I want is something similar, I have a long page with a footer and then more content below the footer, I would like the page to only show the footer when the content reaches the footer, once the footer shows on the screen, it gets fixed to the bottom so I can keep on scrolling the page and view the "more content" and when scrolling back up, the footer detaches from fixed at the bottom back to normal!

I have attached a screenshot to maybe help explaining it better!

• javascript
• jquery
• html
• css

• have you tried anything? can you share your code in Jsfiddle? – web2008 Commented Aug 7, 2013 at 3:50
• something like this jsbin./omanut/2 but instead of a header! I want it in the footer! the footer should not be sticky at first, but once it shows in the page, it gets fixed to the bottom so you can scroll for more content! does that makes sense? – hyperexpert Commented Aug 7, 2013 at 4:22

4 Answers 4

Well it requires some steps...

• Get how much window has scrolled.
• check if it has scrolled beyond the point we want our footer to start acting as fixed.
• That point is a sum of window height - footer height.
• if that point is again gone back to then make it as it was.
• Add function to scroll event. So which check everything and does the work if needed.

See demo here: http://jsfiddle/techsin/MgQQm/2/embedded/result/

See code here: http://jsfiddle/techsin/MgQQm/2/

$footer = $('#footer');
$win = $(window);
var ipos = $footer.offset().top;
var wpos, space, width;
width = $footer.width();

function h(e) {
    wpos = $win.scrollTop();
    space = $win.height() - $footer.height();
    if ((wpos + space) > ipos) {
        $footer.addClass('fixed');
        $footer.width(width);
    } else {
        $footer.removeClass('fixed');

    }
}


$(window).scroll(h);

 <div id="content"></div>
 <div id="moreContent"></div>
 <div id="footer"></div>

css

 #content {
   height:1000px;
   width:400px;
   position: relative;
   z-index: 2;
   background-color:red;
}
#moreContent{
   height:500px;
   width:450px;
   margin:0px 0px 100px 0px;
   position: relative;
   z-index: 0;
   background-color:yellow;
 }
#footer {
   position: fixed;
   bottom: 0;
   width:400px;
   left: 8px;
   right: 0;
   height: 100px;
   z-index: 1;
   background-color:blue;
}

demo

In css itself before, you may keep it to position:fixed;.

Or use JQuery for that,

$('footer').css({position:'fixed'});

Or pure js,

document.getElementByTagName('footer').style.position = 'fixed';

To make it scrollable later use jQuery,

 $('footer').css({position:'relative'});

Or use javascript,

 document.getElementByTagName('footer').style.position = 'relative';

Your css for footer element

.sticky {
    width: 100%;
    position:fixed;
    background: #F6D565;
    padding: 25px 0;
    top:700px;
    text-transform: uppercase;
  }

For demo chk this JSFIDDLE