【前端】jQuery实现固定栏
作者：邹峰立，微博：zrunker，邮箱：zrunker@yahoo.com，微信公众号：书客创作，个人平台：www.ibooker.cc。
书客创作
不知道从什么时候开始，Web前端开始流行固定栏，现在大多数的网站多多少少都应用了固定栏效果。固定栏常常会固定在网页页面的四周（顶部，底部，侧边），例如页面右侧返回顶部、页面顶部导航栏、页面侧边目录、页面底部广告等。
那么如何实现一个合格的固定栏效果呢？
分析
1、固定栏效果是相对于浏览器而言，所以固定栏定位也要以浏览器为参照物进行定位，这里便用到position:fixed属性（固定定位）。
2、固定栏不一定是页面加载完成之后就马上固定，也可以是浏览器的滚动一段距离之后再进行固定，这样的话对浏览器滚动监听也将会用到，在jQuery中对浏览器的滚动监听相对比较简单：$(window).scroll(function () {})。
3、其他变动，例如将position的值改成fixed的后，固定栏的top，left，right，bottom，width等属性可能都要进行变化，才能实现我们想要的效果。
接下来将以顶部固定栏和右侧固定栏两种实例，讲讲如何利用jQuery实现固定栏效果。
页面布局：注意固定顶部栏写了两个一样的DIV（top_ nav和fixed_top _ hide），这是因为，如果只有一个顶部栏top_ nav的话，当顶部栏top_nav固定的时候，top _ nav将会脱离文档流，top_nav所占有位置空缺，而导致页面重构，这时候顶部栏top _nav以下的内容将会上移，如果上移的距离过大，导致视觉效果非常差。
<!-- 顶部 -->
<div id="top">顶部</div>
<!-- 固定顶部 -->
<div id="top_nav" class="fixed_top">固定顶部栏</div>
<div id="fixed_top_hide" class="fixed_top">固定顶部栏隐藏</div>
<!-- 内容区 -->
<div id="content">
<div id="content_left">内容区左侧</div>
<div id="content_right">内容区右侧固定</div>
</div>
CSS样式代码：这里不在详细说明。
body {outline: none;padding: 0;margin: 0;border: none;height: 100%;font-size: 30px;}
#top,.fixed_top,#content {float: left;}
#top {width: 100%;height: 200px;background-color: red;}
.fixed_top {background-color: aqua;width: 80%;height: 100px;margin: 20px 10%;}
#fixed_top_hide {display: none;}
#content {width: 80%;margin: 20px 10%;min-height: 800px;}
#content_left {float: left;height: 500px;width: 75%;background-color: blue;}
#content_right {float: right;height: 300px;width: 20%;background-color: fuchsia;}
布局结构图
实例
1、顶部固定栏
（1）、导入jQuery插件，这里可以采用两种方式引入：1、下载jQuery文件到本地，直接引入本地文件。2、借助于第三方平台CDN引入（需要网络）。
<!-- 1.本地引入jQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- 2.第三方平台CDN引入jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
（2）、页面布局加载完成后，设置浏览器滚动监听。jQuery为我们提供了$(function(){})方法，该方法是在页面记载完成之后才会执行。伪代码如下：
$(function(){
var jWindow = $(window);// 获取window窗体
<%--Window滚动事件监听-实现顶部固定--%>
jWindow.scroll(function () {
// 实现业务逻辑操作
});
});
（3）、实现业务逻辑操作，在本实例当中，真正出来顶部固定的是fixed_ top_hide，那么什么样的条件下才要实现固定显示呢？答案是当浏览器滚动的距离>=顶部栏的高度+顶部栏到浏览器顶部的距离的时候。
var jWindow = $(window);// 获取window窗体
var topHeight = $("#top_nav").height();// 获取顶部固定栏自身高度
var topStartPos = $("#top_nav").offset().top;// 获取顶部固定栏到浏览器顶部的距离
var totalHeight = topHeight + topStartPos;
jWindow.scroll(function () {<%--Window滚动事件监听-实现顶部固定--%>
var p = $(window).scrollTop();// 获取滚动条到顶部的高度
if (p >= totalHeight) {
$("#fixed_top_hide").css({
"position": "fixed",// position固定定位
"top": 0,// 距离浏览器顶部0
"display": "block"// 布局显示
});
} else {
$("#fixed_top_hide").css({
"position": "static",// position默认状态
"display": "none"// 布局隐藏
});
}
});
这里需要注意的是，通过$("#fixed_ top_hide").css({});修改样式，position：static表示设置position设置为默认值，设置top:0表示到浏览器顶部的距离为0。
顶部固定栏效果图
2、右侧固定栏
相比顶部固定栏右侧固定栏会复杂一些，它不仅仅要考虑到顶部的距离，而且要考虑到浏览器右侧的距离，因为它的父元素非body，所以还要考虑width宽度问题。不同的是，右侧固定条件是览器滚动的距离>=右侧固定栏到浏览器顶部的高度。
具体实现代码：这里只给出核心代码
var elmStartPos = $("#content_right").offset().top;// 获取右侧固定栏到浏览器顶部的距离
jWindow.scroll(function () {<%--Window滚动事件监听-实现右侧固定--%>
var p = $(window).scrollTop();// 获取滚动条到顶部的高度
if (p >= elmStartPos) {
$("#content_right").css({
"position": "fixed",// position固定定位
"width": (0.8 * 0.2 * 100) + "%",// 重置宽度
"top": 0,// 距离浏览器顶部0
"right": "10%"// 设置到右边的距离});
} else {
$("#content_right").css({
"position": "static",// position默认状态
"width": "20%"// 重置宽度
});
}
});
右侧固定栏效果图
注意：
1、“因为它的父元素非body，所以还要考虑width宽度问题。”这句话怎么理解？
右侧固定栏content_ right的一级父元素为content，在CSS样式中设置其width:20%。而此时的20%是相对于一级父元素content。在右侧固定栏content_right被设置position: fixed之后，它将会脱离文档流，此时width:20%中20%是相对于body（或者说是浏览器），显然此时的20%会比之前的大，所以在设置固定之后，我们还要对其宽度重新进行计算 (0.8 * 0.2 * 100)%，0.8表示一级父元素content相对于body的宽度。
2、"right": "10%"
当右侧固定栏content_right脱离文档流之后，会向左侧浮动，所以要设置相对浏览器右侧的距离。
3、"width": "20%"
当取消固定的时候一定要将宽度重置为原来的20%，道理则是注意1的反过程。
微信公众号：书客创作
