jQuery固定浮动侧边栏实现思路及代码


Posted in Javascript onSeptember 28, 2014

这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,现思路是这样的:首先获取需要跟随的DIV距离页面顶部的距离,然后判断,当浏览器滚动的距离大于该DIV本身距离顶部距离的时候,则添加CSS属性fixed即可。

代码如下

HTML代码:

<div id="header">header</div>
<div id="sidebarWrap">
<div id="sidebar">Sidebar</div>
</div>
<div id="main">Main</div>
<div id="footer">footer</div>

CSS代码:

body {
margin: 10px auto;
font-family: sans-serif;
width: 500px;
}
div {
border-radius: 5px;
box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
border: 1px solid #ccc;
padding: 5px;
}
#sidebarWrap {
height: 400px;
width: 210px;
float: right;
position: relative;
box-shadow: none;
border: none;
margin: 0;
padding: 0;
}
#main {
width: 270px;
height: 4000px;
}
#footer {
clear: both;
margin: 10px 0;
}
#sidebar {
width: 200px;
height: 300px;
position: absolute;
}
#header {
height: 200px;
margin-bottom: 10px;
}
#sidebar.fixed {
position: fixed;
top: 0;
}
#footer { height: 600px; }
#footer { height: 600px; }

JavaScript代码:

$(function() {
var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

var maxY = footTop - $('#sidebar').outerHeight();

$(window).scroll(function(evt) {
var y = $(this).scrollTop();
if (y > top) {
if (y < maxY) {
$('#sidebar').addClass('fixed').removeAttr('style');
} else {
$('#sidebar').removeClass('fixed').css({
position: 'absolute',
top: (maxY - top) + 'px'
});
}
} else {
$('#sidebar').removeClass('fixed');
}
});
});
Javascript 相关文章推荐
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
js文件包含的几种方式介绍
Sep 28 #Javascript
javascript中bind函数的作用实例介绍
Sep 28 #Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 #Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 #Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 #Javascript
js propertychange和oninput事件
Sep 28 #Javascript
javascript检测是否联网的实现代码
Sep 28 #Javascript
You might like
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
?繁体转换的class
2006/10/09 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
pygame实现简易飞机大战
2018/09/11 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
python scatter函数用法实例详解
2020/02/11 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
学生实习推荐信范文
2013/11/26 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
教师节活动总结
2014/08/29 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Golang 并发下的问题定位及解决方案
2022/03/16 Golang