WordPress如何实现侧边栏自动跟随

本文主要讲解Wordpress如何实现侧边栏自动跟随，也就是实现粘性侧边栏，当文章内容特别长时，用户不断往下滚动文章，由于侧边栏数量有限，会导致侧边栏部分出现大面积空白的情况，如果实现了侧边栏自动跟随就可以极大的提高用户体验，也可以提高网站的黏性。

现在我们一起来看一下该Wordpress如何实现侧边栏自动跟随吧。网上有不少写大量js和css代码来实现的，不是很推荐，因为很多小白根本看不懂，这里我们直接引入一个js文件再加一小段代码就实现了。

1）前期准备

一般我们wordpress主题都会默认引入jquery的js文件，如果你的没有可以再引一次，但大部分都是引入了的，因为我们核心的自动跟随的js需要依赖jquery，下面贴上jquery的引入方法。

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

2）引入侧边栏自动跟随js

接下来我们需要下载开源的侧边栏自动跟随js，名称为theia-sticky-sidebar.min.js，下载地址在github：点击去github下载

下载好后上传到我们的主题中即可，记住文件位置目录。

3）引用js实现侧边栏跟随

一般我们主题的结构都是这样的：

<div class="wrapper">
    <div class="content">
        内容
    </div>
    <div class="sidebar">
        侧边栏
    </div>
</div>

注意侧边栏都在class="sidebar"的div中，这里的sidebar样式非常重要，就是我们下面代码中用到的，最后我们只需要在主题中添加如下代码即可，建议直接放在页面底部加载执行：

<script type="text/javascript" src="换成你的目录/theia-sticky-sidebar.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.sidebar').theiaStickySidebar({
        // 其他配置
        additionalMarginTop: 60
        });
    });
</script>

现在就可以实现Wordpress如何实现侧边栏自动跟随的效果了，大家可以打开本站的任意一篇内容较长的文章去看下效果吧。

以上就是Wordpress如何实现侧边栏自动跟随的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)