„jQuery“ lipni poraštė - CSS-gudrybės

Apskritai CSS lipni poraštė yra geriausias būdas, nes ji veikia sklandžiai ir nereikalauja „JavaScript“. Jei reikalingas žymėjimas tiesiog neįmanomas, ši „jQuery JavaScript“ gali būti pasirinkimo galimybė.

HTML

Tiesiog įsitikinkite, kad #footer yra paskutinis matomas dalykas jūsų puslapyje.

 Sticky Footer

CSS

Suteikti jai nustatytą aukštį yra neprotingiausia.

#footer ( height: 100px; )

jQuery

Kai langas įkraunamas ir slenkamas ar keičiamas jo dydis, tikrinama, ar puslapių turinys yra trumpesnis nei lango aukštis. Jei taip, tai reiškia, kad po turiniu prieš lango pabaigą yra baltos vietos, todėl poraštę reikia pakeisti į lango apačią. Jei ne, poraštė gali išlaikyti įprastą statinę padėtį.

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