jquery中淡入_如何使用jQuery淡入WordPress中的最后一个侧边栏小部件

jquery中淡入

Recently one of our users asked us about how to add a fade in effect for the last widget in the sidebar. This popular jQuery effect is used on many well-known websites and blogs. As the user scrolls down the page, the last widget in the sidebar fades in and become visible. The animation makes the widget eye-catchy and noticeable which dramatically increases the click-through rate. In this article, we will show you how to fade in the last sidebar widget in WordPress using jQuery.

最近，我们的一位用户向我们询问了如何为侧边栏中的最后一个小部件添加淡入效果。 这种流行的jQuery效果已在许多知名网站和博客上使用。 当用户向下滚动页面时，侧栏中的最后一个小部件会淡入并变为可见。 动画使小部件醒目且引人注目，从而大大提高了点击率。 在本文中，我们将向您展示如何使用jQuery在WordPress的最后一个侧边栏小部件中淡入淡出。

Below is a demo of what it would look like:

以下是其外观的演示：

In this tutorial, you will be modifying your theme files. It is recommended that you backup your theme before proceeding any further.

在本教程中，您将修改主题文件。 建议您先备份主题，然后再继续。

步骤1：添加Fadein效果JavaScript (Step 1: Adding JavaScript for Fadein Effect)

First you need to add is the jQuery code to your WordPress theme as a separate JavaScript file. Start by opening a blank file in a text editor like Notepad. Next save this blank file as wpb_fadein_widget.js on your desktop and paste the following code inside it.

首先，您需要将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;  
}
}
});
}
});

The most important line in this code is var sidebarElement = $('div#secondary');.

这段代码中最重要的一行是var sidebarElement = $('div#secondary'); 。

This is the id of the div containing your sidebar. Since each theme may use different sidebar container divs, you need to find out the container id that your theme is using for the sidebar.

这是包含侧边栏的div的ID。 由于每个主题可能使用不同的边栏容器div，因此您需要找出主题用于边栏的容器ID。

You can find this out by using the inspect element tool in Google Chrome. Simply right click on your sidebar in Google Chrome, and then select Inspect Element.

您可以使用Google Chrome浏览器中的检查元素工具找出答案。 只需右键单击Google Chrome中的侧边栏，然后选择检查元素。

In the source code, you will be able to see your sidebar container div. For example, the default Twenty Twelve theme uses secondary, and Twenty Thirteen uses teritary as the ID for the sidebar container. You need to replace secondary with the ID of your sidebar container div.

在源代码中，您将能够看到侧边栏容器div。 例如，默认的“二十二十二”主题使用secondary ，而“二十三十三”使用teritary作为侧边栏容器的ID。 您需要用侧边栏容器div的ID替换secondary 。

Next you need to use a FTP Client to upload this file to the js folder inside your WordPress theme directory. If your theme directory does not have a js folder, then you need to create it by right clicking and selecting ‘Create New Directory’ in your FTP client.

接下来，您需要使用FTP客户端将此文件上传到WordPress主题目录内的js文件夹。 如果您的主题目录没有js文件夹，则需要通过右键单击并在FTP客户端中选择“创建新目录”来创建它。

步骤2：将JavaScript放入WordPress主题 (Step 2: Enqueuing Your JavaScript in WordPress Theme)

Now that your jQuery script is ready, it is time to add it in your theme. We will use the proper method of adding the javascript in your theme, so simply paste the following code in your theme’s functions.php file.

现在您的jQuery脚本已准备就绪，是时候将其添加到主题中了。 我们将使用在主题中添加javascript的正确方法 ，因此只需将以下代码粘贴到主题的functions.php文件中。

wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

That’s all, now you can add a widget in your sidebar that you want to appear with the fadein effect and then visit your website to see it in action.

就是这样，现在您可以在侧边栏中添加一个希望以淡入效果显示的小部件，然后访问您的网站以查看其运行情况。

步骤3：在淡入淡出之后使最后一个小部件保持粘性 (Step 3: Making the Last Widget Sticky After the Fade in Effect)

An often desired feature with the fade in effect is to make the last sidebar widget scroll as the user scrolls. This is called floating widget or sticky widget.

淡入淡出通常需要的功能是使最后一个侧边栏小部件随用户滚动而滚动。 这称为浮动窗口小部件或粘性窗口小部件。

If you look at the jQuery code above, you will notice that we added a wpbstickywidget CSS class to the widget after the fade in effect. You can use this CSS class to make your last widget sticky after it fades in. All you need to do is paste this CSS to your theme’s stylesheet.

如果您看一下上面的jQuery代码，您会注意到我们在淡入效果之后向小部件添加了wpbstickywidget CSS类。 您可以使用此CSS类使最后一个小部件淡入后保持粘性。您所需要做的就是将该CSS粘贴到主题的样式表中。

.wpbstickywidget { 
position:fixed;
top:0px; 
}

Feel free to modify the CSS to meet your needs. You can change the background color or fonts to make the widget even more prominent. If you want you can even add a smooth scroll to top effect next to your last widget which will allow users to scroll back quickly.

随意修改CSS以满足您的需求。 您可以更改背景颜色或字体，以使小部件更加突出。 如果愿意，您甚至可以在上一个小部件旁边添加一个平滑滚动到顶部效果 ，这将允许用户快速向后滚动。

We hope this article helped you add a fade in effect to the last widget in your WordPress sidebar. For more jQuery goodness, check out the best jQuery tutorials for WordPress.

我们希望本文能帮助您为WordPress边栏中的最后一个小部件添加淡入淡出的效果。 要获得更多jQuery优势，请查看WordPress 最佳jQuery教程 。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Google+上找到我们。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-fade-in-the-last-sidebar-widget-in-wordpress-using-jquery/

jquery中淡入