JQuery lipīgā kājene - CSS-triki

Parasti CSS Sticky Footer ir labākais veids, kā iet, jo tas darbojas nevainojami un tam nav nepieciešams JavaScript. Ja nepieciešamais marķējums vienkārši nav iespējams, šī jQuery JavaScript var būt opcija.

HTML

Vienkārši pārliecinieties, ka #footer ir pēdējā redzamā lieta jūsu lapā.

 Sticky Footer

CSS

Piešķirt tam noteiktu augstumu ir visnopietnākais.

#footer ( height: 100px; )

jQuery

Kad logs tiek ielādēts un kad tas tiek ritināts vai mainīts, tiek pārbaudīts, vai lapu saturs ir īsāks par loga augstumu. Ja tas tā ir, tas nozīmē, ka zem satura pirms loga beigām ir atstarpe, tāpēc kājene jāpārvieto uz loga apakšdaļu. Ja nē, kājene var saglabāt normālu statisko pozicionēšanu.

// 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) ));