jQuery固定浮动侧边栏(jQuery fixed Sidebar)
这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的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;
marg(www.111cn.net)in-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');
}
});
});
from:http://www.111cn.net/wy/jquery/66377.htm
jQuery固定浮动侧边栏(jQuery fixed Sidebar)的更多相关文章
- 固定浮动侧边栏(SmartFloat)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6
http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...
- jQuery 顶部导航尾随滚动,固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- Stickup – 轻松实现元素固定效果的 jQuery 插件
粘贴是一个简单的 jQuery 插件,在页面滚动的时候固定一个元素到浏览器窗口的顶部,让其总是保持在视图中可见.这个插件作用于多页的网站,但是对于单页的布局有额外的功能.借助 CSS,还可以实现当前视 ...
- 一款基于jquery固定于顶部的导航
今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部.效果图如下: 在线预览 源码下载 实现的代 ...
- 非常强大的jQuery万能浮动框插件
支持hover, click, focus以及无事件触发:支持多达12种位置的定位,出界自动调整:支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等:可自定义装载容器:内置UI不错的 ...
- jquery 固定导航
网页代码: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> & ...
- js进阶 13-8 jquery如何实现侧边栏
js进阶 13-8 jquery如何实现侧边栏 一.总结 一句话总结:先是把侧边栏设置为left为-100px,隐藏起来,jquery自定义动画animate里面的改变元素的距左边的宽度left,sl ...
- js,onblur后下一个控件获取焦点判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval
需求: input控件在失去焦点后直接做验证,验证通不过的话,显示相应错误.但是如果失去焦点后点击的下个控件是比较特殊的控件(比如,退出系统),那么不执行验证操作,直接退出系统(防止在系统退出前,还显 ...
随机推荐
- Ugly Number II
注意负数,所以要使用long,而不能用int 详细解释 请参见http://www.cnblogs.com/julie-yang/p/5147460.html #include<vector&g ...
- Java多线程之Lock的使用
import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util ...
- EF获取一个或者多个字段
有时候直接查询出一个实体,比较浪费性能,对于字段比较少的表来说差异不大,但是如果一个表有几十个字段,你只要取出一个字段或者几个字段,而取出整个实体,性能就会有差异了. /// <summary& ...
- IDispatch error #3092
在采用ADO访问ACCESS数据库的时候,出现IDispatch error #3092错误的原因之一是在SQL语句中使用了保留关键字.比如:如果表的名称为User 则会出现该错误.,若字段为valu ...
- C# 4.0中dynamic的作用
internal sealed class Coffee { public string GetName() { return "You selected Maxwell coffee.&q ...
- OpenCV 绘制图像直方图
OpenCV绘制图像直方图,版本2.4.11 直方图可展示图像中的像素分布,是用以表示数字图像中亮度分布的直方图,标绘了图像中每个亮度值的像素数.可以借助观察该直方图了解需要如何调整亮度分布.这种直方 ...
- MySql数据库-使用cmd操作数据库
寄语: 针对一些公司对测试岗位掌握SQL的要求,本博文以此献给没有掌握数据库语句知识的功能测试人员,愿与广大测试同胞共同进步. 如果电脑上已安装配置好MySQL数据库,打开命令提示符,按照下图以此操作 ...
- 数据库连接池配置 - Oracle,SQL Server,DB2,MYSQL,SQLLITE3
################## 数据库连接配置 ################## #Oracle#hibernate.connection.driverClass=oracle.jdbc.d ...
- Sqrt(x) - LintCode
examination questions Implement int sqrt(int x). Compute and return the square root of x. Example sq ...
- 小白菜初探nodejs
记得大四那年实习的时候出去找工作,就常常听见大家说node.从那以后,悄然埋下了一颗学习nodejs的心.不过由于基础太薄弱,一直没有学习.加之工作上没有相关应用,就一直搁置到现在. 年会的时候,老大 ...