让footer bar置底

2017-01-10 10:00:51来源:作者:flex_莫冲人点击

参考:
https://css-tricks.com/snippets/jquery/jquery-sticky-footer/
HTML:
<div >    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/

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台