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 相关文章推荐
奇妙的js
Sep 24 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
JavaScript编写开发动态时钟
Jul 29 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
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
对Angular中单向数据流的深入理解
2018/03/31 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
简单实现Python爬取网络图片
2018/04/01 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
中专生的个人自我评价
2013/12/11 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python