首页>技术知识>WordPress wordpress CMS主题如何让侧边栏跟随滚动条固定不动?【在下拉滚动到侧边栏高度时】
WordPress教程学习网站
2022-06-22
WordPress教程学习网站丨模板定制、网站使用教程、插件推荐、代码优化、wp建站教程、数据文章采集、系统开发、系统优化,功能开发,仿站教程等各类WordPress技术知识,供网友学习了解。

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

image.png

image.png

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

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

在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 。

显示全部内容...