wordpress主题侧边栏随窗口浮动

本文介绍了在WordPress主题中实现侧边栏随窗口浮动的JavaScript方法。需将代码添加至header.php模板,并调整选择器名称和数值“368”以适应主题布局。代码通过动态计算滚动位置,确保侧边栏在页面滚动时平滑浮动,同时限制其移动范围以避免溢出。

WordPress基础教程
阅读时间: 7 分钟
最后更新时间:2025年11月13日

wordpress主题侧边栏随窗口浮动:将下面的javascript代码加到主题头部header.php模版中。修改其中的“#sidebar”为你的主题侧边选择器名称;根据不同的主题头部模版高度,适当调整其中的数字“368”。

<script type="text/javascript">
 var documentHeight = 0;
 var topPadding = 15;
 $(function() {
 var offset = $("#sidebar").offset();
 documentHeight = $(document).height();
 $(window).scroll(function() {
 var sideBarHeight = $("#sidebar").height();
 if ($(window).scrollTop() > offset.top) {
 var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
 var maxPosition = documentHeight - (sideBarHeight + 368);
 if (newPosition > maxPosition) {
 newPosition = maxPosition;
 }
 $("#sidebar").stop().animate({
 marginTop: newPosition
 });
 } else {
 $("#sidebar").stop().animate({
 marginTop: 0
 });
 };
 });
 });
</script>

 

这篇文章有用吗?

点击星号为它评分!

平均评分 0 / 5. 投票数: 0

到目前为止还没有投票!成为第一位评论此文章。

曾凤祥

曾凤祥

技术负责人
小兽wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为10万多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。小兽wordpress能坚持多年,是因为我们一直诚信。

相关文章

如何让线上业务更上一层楼

还没有WordPress网站

还没有WordPress网站

不管你从事什么行业,WordPress都会为你提供一个专业的主题模板。在WordPress市场上有成千上万的免费主题,适合很多中小企业。

查看所有模板
已经有WordPress网站

已经有WordPress网站

小兽WordPress诚邀你一起学习WordPress,愿与各方携手升级改善您的WordPress网站,一起交流网站加速,网站优化等问题。

马上交个朋友
微信联系
chat 扫码联系
模板建站
挑选模板
网站定制
免费诊断
咨询热线
咨询热线

189-0733-7671

返回顶部