सामान्य तौर पर CSS स्टिकी फूटर जाने का सबसे अच्छा तरीका है, क्योंकि यह पूरी तरह से सुचारू रूप से काम करता है और इसके लिए जावास्क्रिप्ट की आवश्यकता नहीं होती है। यदि आवश्यक मार्कअप केवल संभव नहीं है, तो यह jQuery जावास्क्रिप्ट एक विकल्प हो सकता है।
एचटीएमएल
बस सुनिश्चित करें कि #footer आपके पृष्ठ की अंतिम दृश्यमान चीज़ है।
Sticky Footer सीएसएस
इसे एक निर्धारित ऊंचाई देना सबसे मूर्खतापूर्ण सबूत है।
#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) ));डेमो
डेमो देखें