jQuery固定浮动侧边栏实现思路及代码
更新时间：2014年09月28日 18:02:18 投稿：whsnow
如果页面比较高，当滚动条拖到页面的下面的时候，侧边栏会出现一个固定跟随浏览器的DIV框，下面将思路及具体实现与大家分享下
这个功能现在应用的非常普遍，如果页面比较高，当滚动条拖到页面的下面的时候，侧边栏会出现一个固定跟随浏览器的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');
}
});
});
相关文章
jQuery UI Datepicker length为空或不是对象错误的解决方法
jQuery UI Datepicker length为空或不是对象错误的解决方法,需要的朋友可以参考下。2010-12-12
客户端的抖动,快速操作,网络通信或者服务器响应慢,都容易造成服务器重复处理,这篇文章主要给大家介绍了关于jquery项目中如何防重复提交的相关资料,需要的朋友可以参考下2021-11-11
在我们日常绘制canvas的时候都不可避免的遇到一个问题，那就是canvas绘制出来的东西可能会有模糊，所以本文为大家准备了解决canvas绘制模糊的方法，希望对大家有所帮助2023-06-06
浅谈MVC+EF easyui dataGrid 动态加载分页表格
下面小编就为大家带来一篇浅谈MVC+EF easyui dataGrid 动态加载分页表格。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
本文给大家分享的是使用jQuery插件animateSlide制作多点滑动幻灯片特效，十分的炫酷，有需要的小伙伴可以参考下2015-06-06
jQuery选中select控件 无法设置selected的解决方法
select 控件的 option用jQuery动态添加，然后选中某项时，IE6不能执行（火狐没问题），用try{}catch(err){alert(err.description);}提示为“无法设置selected属性 未指明的错误”2010-09-09
这篇文章主要为大家详细介绍了jQuery验证插件validate使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
本篇文章主要介绍了jquery——九宫格大转盘抽奖实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
jquery中的$(document).ready()使用小结
本篇文章主要是对jquery中的$(document).ready()使用方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
JQuery 获取多个select标签option的text内容(实例)
下面小编就为大家带来一篇JQuery 获取多个select标签option的text内容(实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论