看到旁边这个导航栏了吗?

它会随着页面的滚动而变化位置,如果文章很长

像这样?

链接:这里面有很长的文章

这样会让右半边区域显得很空,所以我们一般会选择使用position:fixed将其位置固定在右侧区域,不过也会有特殊情况?

血压飙升.jpg

介绍:affix!!!

它可以让侧边栏灵活的固定在侧面,像这样?

链接:使用了affix的sidebar

实现原理:

使用了affix的侧边栏会在页面处于顶端时自动为其添加一个名为affix-top的class。这个class中没有任何内容。 此时的sidebar会随着页面滚动

当页面滚动超过偏移值top(即sidebar顶端与其父元素顶端的距离)时自动将affix-top移除,并添加一个class affix,由于这个class中含有position:fixed;所以页面会固定在侧面,不随页面滚动,这个class规定了sidebar固定时的位置和状态

当页面滚动超过偏移值bottom(即sidebar低端与其父元素低端的距离)时自动将affix移除,并添加一个class affixbottom,通过这个class将显示方式修改为absolute

以上自动添加的三个class都是可以用自己写css覆盖掉

实现方法:

首先前往https://v4.bootcss.com/docs/getting-started/download/将下图蓝色框中的三个js文件添加到页面中

在想要添加affix的sidebar的属性中添加一条data-spy=”affix”

1
 <div id="sidebar" data-spy="affix">

编写jquery

1
2
3
4
5
6
7
8
$(document).ready(function(){
    $("#sidebar").affix({
        offset: {
            top:0,//偏移值top
            bottom:218//偏移值bottom
      }
    });
});

重写三个affix

1
2
3
4
5
6
7
8
.affix {
        position: fixed;
        width: 333.325px;
    }
.affix-bottom {
        position: absolute;
        width: 333.325px;
}

别问为什么只有两个,我也不知道

注意:使用了position:fixed之后必须将其宽度设置为固定值,否则可能会出现显示异常,这个固定值的确切数值可以在审查元素界面的最下方获得