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

前端 潘老师 3个月前 (12-08) 83 ℃ (0) 扫码查看

本文主要讲解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),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12248.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】