步驟 1：添加 JavaScript 淡入效果
首先，您需要將 jQuery 代碼作為單獨的 JavaScript 文件添加到您的 WordPress 主題中。打開一個文本編輯器（如記事本），將其保存為 wpb_fadein_widget.js，並粘貼以下代碼：
jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/
var sidebarElement = $('div#secondary');
// Check if the sidebar exists
if ($(sidebarElement).length > 0) {
// Get the last widget in the sidebar, and its position on screen
var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
// Hide the last widget
$(lastWidget).hide();
// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {
// If the widget has been displayed, we don't need to keep doing a check.
if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;
}
}
});
}
});
這段代碼中的 var sidebarElement = $(‘div#secondary’); 是最重要的一行。這是包含您側邊欄的 div 的 id。由於每個主題可能使用不同的側邊欄容器 div，您需要找出您的主題所用的容器 id。
您可以使用 Google Chrome 的“檢查元素”工具來找到這個 id。右鍵單擊側邊欄並選擇“檢查元素”，在源代碼中您即可看到側邊欄容器 div。
例如，默認的 Twenty Twelve 主題使用的是 secondary，而 Twenty Thirteen 使用的是 teritary。您需要將 secondary 替換為您側邊欄容器 div 的 id。然後使用 FTP 客戶端將此文件上傳到主題目錄中的 js 文件夾。如果您的主題目錄沒有 js 文件夾，則需要創建一個。
步驟 2：在 WordPress 主題中註冊 JavaScript
現在 jQuery 腳本已準備就緒，是時候將其添加到您的主題中了。我們將使用正確的方法將 JavaScript 添加到您的主題中，只需將以下代碼粘貼到主題的 functions.php 文件中：
wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );
這樣就完成了，您現在可以在側邊欄中添加一個小工具以淡入效果顯示，然後訪問您的網站查看其效果。
步驟 3：在淡入效果後使最後一個小工具固定
一個常見的需求是使最後一個側邊欄小工具在淡入效果後固定位置。這被稱為浮動小工具或固定小工具。
如果您查看上述 jQuery 代碼，將會注意到淡入效果後我們添加了一個 wpbstickywidget CSS 類。您可以使用這個 CSS 類使最後的小工具在淡入後固定位置。只需將以下 CSS 粘貼到主題的樣式表中：
.wpbstickywidget {
position:fixed;
top:0px;
}
您可以根據需要修改 CSS，更改背景顏色或字體，讓小工具更加突出。您甚至可以在最後一個小工具旁邊添加平滑返回頂部的效果，讓用戶快速返回頁面頂部。
我們希望這篇文章能幫助您在 WordPress 側邊欄中添加最後一個小工具的淡入效果。更多 jQuery 好料，請查看我們的最佳 jQuery 教程。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲得 WordPress 視頻教程。您還可以在 Twitter 和 Google+ 上找到我們。
