JQuery Sticky Footer - CSS-Κόλπα | Αποσπάσματα κώδικα 2025

Σε γενικές γραμμές, το CSS Sticky Footer είναι ο καλύτερος τρόπος να πάει, καθώς λειτουργεί τέλεια ομαλά και δεν απαιτεί JavaScript. Εάν η απαιτούμενη σήμανση απλά δεν είναι δυνατή, αυτό το jQuery JavaScript μπορεί να είναι μια επιλογή.

HTML

Απλώς βεβαιωθείτε ότι το #footer είναι το τελευταίο ορατό πράγμα στη σελίδα σας.

 Sticky Footer

CSS

Το να έχεις ένα καθορισμένο ύψος είναι το πιο ανόητο.

#footer ( height: 100px; )

jQuery

Όταν φορτώνεται το παράθυρο και όταν γίνεται κύλιση ή αλλαγή μεγέθους, ελέγχεται εάν το περιεχόμενο των σελίδων είναι μικρότερο από το ύψος του παραθύρου. Εάν είναι, αυτό σημαίνει ότι υπάρχει λευκός χώρος κάτω από το περιεχόμενο πριν από το τέλος του παραθύρου, οπότε το υποσέλιδο πρέπει να επανατοποθετηθεί στο κάτω μέρος του παραθύρου. Εάν όχι, το υποσέλιδο μπορεί να διατηρήσει την κανονική του στατική θέση.

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