`
flex_莫冲
  • 浏览: 1075804 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

让footer bar置底

阅读更多
参考:
https://css-tricks.com/snippets/jquery/jquery-sticky-footer/
HTML:
<div id="footer">
    Sticky Footer
</div>


CSS:

#footer { height: 100px; }


JS:
// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() { 
       
       var footerHeight = 0,
           footerTop = 0,
           $footer = $("#footer");
           
       positionFooter();
       
       function positionFooter() {
       
                footerHeight = $footer.height();
                footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
       
               if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                   $footer.css({
                        position: "absolute"
                   }).animate({
                        top: footerTop
                   })
               } else {
                   $footer.css({
                        position: "static"
                   })
               }
               
       }

       $(window)
               .scroll(positionFooter)
               .resize(positionFooter)
               
});


DEMO:
https://css-tricks.com/examples/jQueryStickyFooter/
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics