<!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版固定边栏滚动特效的更多相关文章

  1. html5 固定边栏滚动特效

    <script src="https://code.jquery.com/jquery.js"></script> //引入jquery <scrip ...

  2. jquery版滑块导航栏

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  3. Jquery实现文字向上逐条滚动

    直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  4. jquery版楼层滚动特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼 ...

  5. [JQuery]ScrollMe滚动特效插件

    最近考完试,一切顺利,昨晚闲着无聊把最近要用的一个插件翻译了一下:ScrollMe. (╯‵□′)╯︵┻━┻地址请戳: /* ScrollMe -李明夕翻译(╯‵□′)╯︵┻━┻ */ ScrollM ...

  6. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  7. 一款非常炫酷的jQuery动态随机背景滚动特效

    一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...

  8. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  9. jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)

    最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * ...

随机推荐

  1. JavaScript RegExp 基础详谈

    前言: 正则对于一个码农来说是最基础的了,而且在博客园中,发表关于讲解正则表达式的技术文章,更是数不胜数,各有各的优点,但是就是这种很基础的东西,如果我们不去真正仔细研究.学习.掌握,而是抱着需要的时 ...

  2. javaweb

    关于java,作为一个初学者,作为一个即将跨入其中的钻研者,我觉得我很必要好好地升入其中认真学习每一个环节

  3. 来玩Play框架04 表单

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 表单(form)是最常见的从客户往服务器传递数据的方式.Play框架提供了一些工具 ...

  4. Workflow笔记1——工作流介绍

    什么是工作流? 工作流(Workflow),是对工作流程及其各操作步骤之间业务规则的抽象.概括.描述.BPM:是Business Process Management的英文字母缩写.即业务流程管理,是 ...

  5. Java三大框架之——Hibernate中的三种数据持久状态和缓存机制

    Hibernate中的三种状态   瞬时状态:刚创建的对象还没有被Session持久化.缓存中不存在这个对象的数据并且数据库中没有这个对象对应的数据为瞬时状态这个时候是没有OID. 持久状态:对象经过 ...

  6. mac下查看.mobileprovision文件及钥匙串中证书.cer文件

    mac下查看.mobileprovision文件及钥匙串中证书.cer文件 一. mobileprovision文件查看 xxx.mobileprovision是ios开发中的设备描述文件,里面有证书 ...

  7. 最便捷的免费 SSL 证书解决方案（实测start SSL、Let's Encrypt、七牛免费SSL证书）

    谷歌从 2017 年起,Chrome 浏览器将也会把采用 HTTP 协议的网站标记为「不安全」网站:苹果从 2017 年 iOS App 将强制使用 HTTPS:在国内热火朝天的小程序也要求必须使用 ...

  8. 脱离spring集成cxf(基于nutz框架)

    什么是webService WebService是一种跨编程语言和跨操作系统平台的远程调用技术. 理论资料: http://blog.csdn.net/wooshn/article/details/8 ...

  9. tomcat优化

    tomcat优化:vim catalina.sh添加:JAVA_OPTS="-Djava.awt.headless=true -Dfile.encoding=UTF-8 -server -X ...

  10. ASP.NET中将导出的数据以UTF-8编码方式进行存储

      Response.Charset = "UTF-8"; Response.ContentEncoding = Encoding.UTF8; Response.AppendHea ...