实现智能侧边栏跟随固定范围浮动

发表于 2020-01-28 更新于 2022-02-13 分类于 wordpress 阅读次数： Disqus：

问题描述

我的博客是两列布局，当文章内容过多时，向下滑动，左侧栏会出现空白，影响阅读体验。想要实现这种效果：当左侧栏滑到底时，不继续左边内容向下滑动。查阅网上的资料，实现的方法大致分为三种。

解决方法

解决方法大致分为两种类型：通过插件实现或者修改代码。

参考博客，我添加后没有达到理想效果，可能是哪里没设置好或者设置冲突。 - 安装插件通过插件安装器搜索或者zip压缩包安装即可.

设置Widget固定先启动插件Q2W3 Fixed Widget，然后点击外观->小工具. 对于添加在左侧栏的小工具，多了一个设置选项。如图所示。将需要固定的工具的Fixed widget勾上即可。

修改代码

参照博客

修改js和css代码

修改single.php文件在文件最后添加如下代码

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var offset_left = $(".sidebar").offset().left; //body左边距 = 右边距
var sidebar_w = $(".sidebar").width(); //侧边栏宽度
var sidebar_h = $(".sidebar").outerHeight(); //侧边栏高
var sidebar_top = $(".sidebar").offset().top; //侧边栏上边距
console.log(sidebar_top + sidebar_h)
console.log($(window).height())
console.log($(document).height())
console.log(window.innerHeight)
$(document).scroll(function(){
    var scroll_h = $(document).scrollTop(); //滚动条高度
    if( scroll_h > (sidebar_top+sidebar_h - window.innerHeight)){ //当滚动条高度 > 侧边栏底部到顶部的高
        $(".sidebar").addClass("fixed");  //给侧边栏添加fixed类
        $(".fixed").css({
            'width':sidebar_w+'px', //设置宽度
            'top':sidebar_top + 'px' //设置上边距
        });
    }else{ //如果滚动条高度 <  侧边栏底部到顶部的高
        $(".sidebar").removeClass("fixed");  //去除侧边栏的fixed类
    }
})
});
</script>

修改style.css 在style.css查找.sidebar在其下面添加类fixed的样式代码。

.fixed{
    position:fixed;
    z-index:999;
}

最后实现效果如图所求。最后实现效果是左侧栏滑到底时，直接回到顶部。

利用第三方js代码参照博客

下载第三方js 在github下载theia-sticky-sidebar

放到js目录下，我的目录位置为：/www/wwwroot/onwaier.com/wp-content/themes/twentyfifteen/js

修改single.php代码在原代码最后加入以下代码

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/theia-sticky-sidebar.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.sidebar').theiaStickySidebar({
      // Settings
      additionalMarginTop: 30
    });
  });
</script>

最后实现效果如图所求。注意：上面代码修改都是single.php，只能修改每篇文章的侧栏滑动效果，如果想要修改首页的侧栏滑动效果，可以修改index.php的代码.

问题描述

解决方法

插件Q2W3 Fixed Widget

修改代码