JQuery Sticky Footer - Thủ thuật CSS

Nói chung CSS Sticky Footer là cách tốt nhất để sử dụng, vì nó hoạt động hoàn toàn trơn tru và không yêu cầu JavaScript. Nếu không thể yêu cầu đánh dấu đơn giản, JavaScript jQuery này có thể là một tùy chọn.

HTML

Chỉ cần đảm bảo #footer là thứ hiển thị cuối cùng trên trang của bạn.

 Sticky Footer

CSS

Đặt cho nó một chiều cao nhất định là cách tốt nhất.

#footer ( height: 100px; )

jQuery

Khi cửa sổ tải và khi được cuộn hoặc thay đổi kích thước, nó sẽ được kiểm tra xem nội dung trang có ngắn hơn chiều cao của cửa sổ hay không. Nếu đúng như vậy, điều đó có nghĩa là có khoảng trắng bên dưới nội dung trước khi kết thúc cửa sổ, vì vậy chân trang phải được đặt lại vị trí ở cuối cửa sổ. Nếu không, footer có thể giữ lại vị trí tĩnh bình thường.

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