JQuery Sticky Footer - Trik CSS

Secara amnya CSS Sticky Footer adalah cara terbaik untuk berjalan, kerana ia berfungsi dengan lancar dan tidak memerlukan JavaScript. Sekiranya markup yang diperlukan tidak mungkin, JavaScript jQuery ini mungkin menjadi pilihan.

HTML

Pastikan #footer adalah perkara terakhir yang dapat dilihat di halaman anda.

 Sticky Footer

CSS

Memberi ketinggian yang ditetapkan adalah bukti yang paling bodoh.

#footer ( height: 100px; )

jQuery

Apabila tetingkap dimuat, dan ketika ditatal atau diubah ukurannya, diuji sama ada kandungan halaman lebih pendek daripada ketinggian tetingkap. Jika ya, itu berarti ada ruang putih di bawah kandungan sebelum akhir tetingkap, jadi footer harus diposisikan kembali ke bahagian bawah tetingkap. Sekiranya tidak, footer dapat mengekalkan kedudukan statik normal.

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