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>
jquery版固定边栏滚动特效的更多相关文章
- html5 固定边栏滚动特效
<script src="https://code.jquery.com/jquery.js"></script> //引入jquery <scrip ...
- jquery版滑块导航栏
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...
- Jquery实现文字向上逐条滚动
直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- jquery版楼层滚动特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼 ...
- [JQuery]ScrollMe滚动特效插件
最近考完试,一切顺利,昨晚闲着无聊把最近要用的一个插件翻译了一下:ScrollMe. (╯‵□′)╯︵┻━┻地址请戳: /* ScrollMe -李明夕翻译(╯‵□′)╯︵┻━┻ */ ScrollM ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- 一款非常炫酷的jQuery动态随机背景滚动特效
一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...
- 【前端】jQuery实现锚点向下平滑滚动特效
jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...
- jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)
最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * ...
随机推荐
- Lua 安全调用 metatable 的简单应用
事情的经过 我们的项目中存在好几个战斗界面,不过界面中的内容略有不同.跟同事出去吃饭的时候,他问我.我们现在的战斗界面.有很多是重复的,但是也有偶尔几个地方不太一样.我在战斗过程中驱动这些界面的时候. ...
- xmpp
xmpp学习 下载: Openfire 服务器:Openfire 4.0.2 客户端:Spark 2.7.7 安装 Openfire安装: 根据提示一直下一步,服务器域名设置为:localhost(p ...
- 解决 Tomcat Server in Eclipse unable to start within 45 seconds 不能启动的问题
1.在 Eclipse 下方 Servers TAB页,双击 "Tomcat 7.0 at localhost": 2.在右上角处点开 Timeouts 的设定,修改Start( ...
- glibc 各版本发布时间以及内核默认glibc版本
最近有些软件要求glibc 2.14+,centos 6.x自带的版本是2.12的,特查了下glibc 各版本发布时间以及与对应的内核,如下: Complete glibc release histo ...
- Exception thrown by the agent : java.rmi.server.ExportException: Port already in use
今天有个应用一直起不来,感觉配置都对啊,奇了怪了.看日志发现如下: STATUS | wrapper | 2017/01/04 08:09:31 | Launching a JVM...INFO | ...
- 一步步实现ABAP后台导入EXCEL到数据库【3】
在一步步实现ABAP后台导入EXCEL到数据库[2]里,我们已经实现计划后台作业将数据导入数据库的功能.但是,这只是针对一个简单的自定义结构的导入程序.在实践应用中,面对不同的表.不同的导入文件,我们 ...
- iOS -- 轮播图
UIScrollView + 多张 ImageView 实现轮播 实现原理: 将所有图片的名字储存在数组 imageAry 中,imageAry 的元素个数为 num,在 scrollView 上添加 ...
- Android 5.X新特性之为RecyclerView添加HeaderView和FooterView
上一节我们讲到了 Android 5.X新特性之RecyclerView基本解析及无限复用 相信大家也应该熟悉了RecyclerView的基本使用,这一节我们来学习下,为RecyclerView添加H ...
- 第三方开源库和jar包的区别
jar包和第三方开源库的根本区别在于,开源库的功能比jar包功能更强大,通过引入库项目可以访问java文件以及该开源库项目下的资源文件,例如图片,layout等文件 jar包中只能放class文件 引 ...
- spring加载配置文件
spring加载配置文件 1.把applicationContext.xml直接放在WEB-INF/classes下,spring会采用默认的加载方式2.采用在web.xml中配置ContextLoa ...