JQuery Sticky Footer - Trik CSS | Cuplikan Kode 2024

Secara umum, CSS Sticky Footer adalah cara terbaik untuk melakukannya, karena bekerja dengan sangat lancar dan tidak memerlukan JavaScript. Jika markup yang diperlukan tidak memungkinkan, JavaScript jQuery ini mungkin bisa menjadi pilihan.

HTML

Pastikan saja #footer adalah hal terakhir yang terlihat di laman Anda.

 Sticky Footer

CSS

Memberikan ketinggian yang ditetapkan adalah bukti yang paling bodoh.

#footer ( height: 100px; )

jQuery

Ketika jendela dimuat, dan ketika di-scroll atau diubah ukurannya, itu diuji apakah konten halaman lebih pendek dari tinggi jendela. Jika ya, itu berarti ada ruang putih di bawah konten sebelum akhir jendela, jadi footer harus direposisi ke bagian bawah jendela. Jika tidak, footer dapat mempertahankan posisi statis 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) ));