JQuery是一種流行的JavaScript庫，它提供了各種各樣的函數和方法，方便用戶快速開發網頁應用程序。現在，讓我們來學習如何使用JQuery實現固定底部效果。

$(function() {
var $footer = $("#footer");
var $wrapper = $("#wrapper");
var footerHeight = $footer.outerHeight();
var windowHeight = $(window).height();
// 如果頁面內容不足一屏幕時，讓底部保持在屏幕底部
if ($wrapper.height()< windowHeight - footerHeight) {
$footer.css({
position: "absolute",
bottom: 0
})
} else {
$footer.css({
position: "static"
})
}
$(window).resize(function() {
var windowHeight = $(window).height();
// 如果頁面內容不足一屏幕時，讓底部保持在屏幕底部
if ($wrapper.height()< windowHeight - footerHeight) {
$footer.css({
position: "absolute",
bottom: 0
})
} else {
$footer.css({
position: "static"
})
}
})
})

首先，我們通過選擇器獲取footer元素和wrapper元素，同時獲取footer元素的高度和當前窗口的高度。然后，我們判斷當前頁面內容的高度是否小于窗口高度減去footer元素的高度。如果是，那么我們將footer元素的position值設置為絕對定位，bottom值設置為0，以保持在屏幕底部。否則，我們將position值設置為static，使其回到文檔流中。

最后，我們使用resize事件來實時檢測窗口大小的變化，并且重新判斷當前頁面內容的高度是否小于窗口高度減去footer元素的高度，以保持固定底部效果。