2017年11月聚合文章--jQuery实现固定栏

凡事顺其自然，遇事处之泰然；得意之时淡然，失意之时坦然；艰辛曲折必然，历尽沧桑悟然。遵循简单才不会累，秉承宽容才不会气；学会忘记才不会愁，知道惧怕才不会危；甘于示弱才不会伤，保持低调才不会亏；愿意放弃才不会苦，适度知足才不会悔；记住感恩才不会怨，懂得珍惜才不会愧。

不知道从什么时候开始，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%"// 重置宽度      });
                注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。

[聚合文章] jQuery实现固定栏

分析

实例