jquery版固定边栏滚动特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
}
#header{
width:100%;
height:200px;
background-color: #CCCCCC
}
#side{
float: left;
width: 300px;
height:500px;
background-color: #008000;
}
#main{
margin-left: 310px;
height:5000px;
background-color: #5449F9;
}
#contain{
position: relative;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="contain">
<div id="side">
</div>
<div id="main">
</div>
</div>
</body>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//方法一:适用无头部型侧边栏
/*$(window).scroll(function() {
var windowHeight = $(window).scrollTop() + $(window).height();
var sideHeight = $('#side').height();
if (windowHeight > sideHeight) {
$('#side').css({
'position' : 'fixed',
'left' : '0px',
'top' : -(sideHeight - $(window).height())
});
} else {
$('#side').css({
'position' : 'static'
});
}
});
window.onload=function(){
$(window).trigger('scroll');
};
$(window).resize(function(){
$(window).trigger('scroll');
})*/
//方法二:适用有头部型侧边栏
$(window).scroll(function() {
var windowHeight = $(window).scrollTop();
var sideHeight =$('#main').height()-$('#side').height();
if (windowHeight >200 && windowHeight<sideHeight+200) {
$('#side').css({
position : 'absolute',
left : '0px',
top: windowHeight-200+'px'
});
} else if(windowHeight <=200){
$('#side').css({
position: 'absolute',
left : '0px',
top: '0px'
});
}
});
window.onload=function(){
$(window).trigger('scroll');
};
$(window).resize(function(){
$(window).trigger('scroll');
})
</script>
</html>
最新文章
- linux下查看和添加PATH环境变量
- linux 安装配置Nginx
- CentOS6.5 vsftpd 配置
- ASP.NET中的XML和JSON
- HDU 2516 取石子游戏
- json,xml,Html解析
- CAML query for Group by count and data
- javascript pattern
- html文字有光晕
- 报LinkageError的原因
- Winform - TreeView控件,只展开根目录
- git教程(简单的带你学好git)
- [自制操作系统] BMP格式文件读取&;图形界面系统框架/应用接口设计
- 配合JdbcUtils最终版重写QueryRunner
- TopCoder SRM 560 Div 1 - Problem 1000 BoundedOptimization &; Codeforces 839 E
- FreeSql 如何实现 Sqlite 跨库查询
- 三、vue之router
- String 和 StringBuffer、StringBuilder
- 你不知道的JavaScript --- 作用域相关
- Luogu P4705 玩游戏