如何使滚动页脚固定然后返回滚动

Question

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!

Answer 1

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.net/techsin/MgQQm/2/embedded/result/

See code here: http://jsfiddle.net/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);

Answer 2

 <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

Answer 3

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';

Answer 4

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