wordpress CMS主题如何让侧边栏跟随滚动条固定不动？【在下拉滚动到侧边栏高度时】

扫描下面的二维码，“关注”我的百家号。

在开发wordpress CMS主题时，在文章页面，可能由于左侧的文章内容特别多，而导致右侧的侧边栏在滚动条下拉到一定位置时是空白（如下图-1），再往下拉，右侧就会什么东西都没有了。这时，作为开发者，我们可以让侧边栏在滚动条下拉到 侧边栏 底部时，让侧边栏置顶旋挂在右侧跟随滚动条固定不动（如下图-2）。

下面，我们就来实现wordpress主题 的侧边栏随滚动条下拉而固定不动跟随。

在wordpress主题的single.php文件中添加如下JS代码：

<script>
$(function(){
var offset_left = $(".body").offset().left; //body左边距 = 右边距
var sidebar_w = $(".sidebar").width(); //侧边栏宽度
var sidebar_h = $(".sidebar").outerHeight(); //侧边栏高
var sidebar_top = $(".sidebar").offset().top; //侧边栏上边距

$(document).scroll(function(){
var scroll_h = $(document).scrollTop(); //滚动条高度
if( scroll_h > (sidebar_top+sidebar_h) ){ //当滚动条高度 > 侧边栏底部到顶部的高
$(".sidebar").addClass("fixed");  //给侧边栏添加fixed类
$(".fixed").css({
'width':sidebar_w+'px', //设置宽度
'right':offset_left+'px' //设置右边距
});
}else{ //如果滚动条高度 <  侧边栏底部到顶部的高
$(".sidebar").removeClass("fixed");  //去除侧边栏的fixed类
}
})
});
</script>

在wordpress主题的style.css添加如下样式：

.fixed{
position:fixed;
right:0; top:0;
width:310px;
z-index:66;
}

这里使用了CSS的定位fixed，这个定位是相对于document的，如果设置 right:0 时，会依靠流量器窗口的右边，会与我们网页主体有距离——与原始侧边栏位置x轴有偏离。为了让固定后的侧边栏与原始侧边栏在X轴的位置一至，我们要获取网页主体的右边距：主体距离浏览器右边的距离，因为网页主体是居中的，所以右边距=左边距，即var offset_left = $(".body").offset().left;【body左边距 = 右边距】。

实现原理：如果滚动条下拉的高度超过侧边栏底部的时候，我们就为侧边栏添加fixed类，并且设置fixed类的CSS样式为position:fixed 。