<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			#top_head {

				width: 100%;

				height: 253px;

				background: gray;

			}

			#middle_right_list {

				width: 70%;

				height: 1800px;

				background: #0000FF;

				float: left;

			}

			#middle_left {

				width: 30%;

				height: 300px;

				float: left;

			}

			#middle_left_list {

				width: 100%;

				height: 300px;

				background: #003580;

				background-image: url(../../CS/布局属性全接触/img/1.jpg);

				/*transition: top .03s ease-in;*/

			}

			#middle_content {

				position: relative;

			}

			#middle_content:after {

				content: '';

				display: block;

				clear: both;

				overflow: hidden;

			}

			#foot {

				width: 100%;

				height: 200px;

				background: #004099;

			}

			body,html{

				padding: 0;

				margin: 0;

			}

		</style>

		<script>

			function getByID(idname) {

				var ob = document.getElementById(idname);

				return ob;

			}

			window.addEventListener('scroll', function() {

				//获取滚动高度

				var scrolHight = document.body.scrollTop;

				var middle_left = getByID('middle_left_list');

				var contentHeight = getByID('middle_right_list').offsetHeight - middle_left.offsetHeight;

				console.log(contentHeight);

				if (scrolHight > 253 && scrolHight < (contentHeight + 253)) {

					//改变CSS

					middle_left.style.position = 'absolute';

					middle_left.style.top = (scrolHight - 253) + 'px';

					middle_left.style.left = '0px';

					middle_left.style.width = '30%';

				} else if (scrolHight <= 253) {

					middle_left.style.position = 'static';

					middle_left.style.width = '100%';

				}

			})

//			window.onscroll = function() {

//

//			}

		</script>

	</head>

	<body>

		<div class="container">

			<div id="top_head">头部</div>

			<div id="middle_content">

				<div id="middle_left">

					<div id="middle_left_list">左菜单</div>

				</div>

				<div id="middle_right_list">课程列表</div>

			</div>

			<div id="foot">底部</div>

		</div>

	</body>

</html>

　　

jQuery实现:

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			#top_head {

				width: 100%;

				height: 253px;

				background: gray;

			}

			#middle_right_list {

				width: 70%;

				height: 1800px;

				background: #0000FF;

				float: left;

			}

			#middle_left {

				width: 30%;

				height: 300px;

				float: left;

			}

			#middle_left_list {

				width: 100%;

				height: 300px;

				background: #003580;

				background-image: url(../../CS/布局属性全接触/img/1.jpg);

				/*transition: top .03s ease-in;*/

			}

			#middle_content {

				position: relative;

			}

			#middle_content:after {

				content: '';

				display: block;

				clear: both;

				overflow: hidden;

			}

			#foot {

				width: 100%;

				height: 200px;

				background: #004099;

			}

			body,

			html {

				padding: 0;

				margin: 0;

			}

		</style>

		<script src="../jquery-2.2.4.min.js"></script>

		<script>

			$(window).scroll(function() {

				var scrollHeight = $(window).scrollTop();

				var topHeight = $('#top_head').height();

				var slideHeight = $('#middle_left').height();

				var contentHeight = $('#middle_content').height() - slideHeight;

				console.log(scrollHeight);

				console.log('max:'+ (contentHeight + topHeight));

				if(scrollHeight > contentHeight + topHeight) {

					scrollHeight = contentHeight + topHeight;

				}

				if (scrollHeight > topHeight && scrollHeight <= contentHeight + topHeight) {

					$('#middle_left_list').css({

						"position": "absolute",

						"top": scrollHeight - topHeight + 'px',

						"left": 0,

						"width": '30%'

					});

				} else if (scrollHeight <= topHeight) {

					$('#middle_left_list').css({

						"position": "absolute",

						"top": 0,

						"left": 0,

						"width": '30%'

					});

				}

			})

		</script>

	</head>

	<body>

		<div class="container">

			<div id="top_head">头部</div>

			<div id="middle_content">

				<div id="middle_left">

					<div id="middle_left_list">左菜单</div>

				</div>

				<div id="middle_right_list">课程列表</div>

			</div>

			<div id="foot">底部</div>

		</div>

	</body>

</html>

　　

jQuery侧边栏固定的更多相关文章

  1. jquery 导航固定的一个实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery的固定定位效果

    今天做了个固定定位的效果.比如对导航需要进行固定定位效果: 当没有滚动到导航下面,导航正常显示. 当滚动到导航下面,导航就固定到顶部. 这个效果使用了jquery的方法实现,具体思路为: 1)首先获取 ...

  3. jquery版固定边栏滚动特效

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

  4. Jquery 表格固定表头

    网上找了好多现成的.结果没一个能成.只得自己动手. (function($){ $.fn.fixHeader = { init : function(obj){ var p = obj.parent( ...

  5. FLEX实现两侧边栏固定中间自适应布局

    <style type="text/css"> #outer{ display: flex; width: 100%; flex-flow: row nowrap; } ...

  6. 解决ubuntu侧边栏固定应用单击无反应的问题

    Linux下有些绿色软件,不需要安装就可以双击启动,但有些程序在打开后直接在 Launcher 中右键选择 Lock to Launcher ,但是,有时候单击图标后并未启动应用,下面给出解决方法. ...

  7. jquery 浮动 固定显示

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>无标题文档 我爱b ...

  8. JQuery Mobile - 固定住页面和页脚

    在点击页面空白时候,页眉和页脚会隐藏,在页眉和页脚加入以下代码就可以了: data-tap-toggle ="false" 例子: <div data-role=" ...

  9. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

随机推荐

  1. PowerDesigner反向工程,根据Oracle数据库结构生成ER图(2014-3-25记）

    01.添加数据服务端 02. PowerDesigner 1. 新建PDM:选择菜单File->New Model,[Model type]选择Physical Data Model,[DBMS ...

  2. js与jsp

    jsp :j2ee 中的一样模版技术,运行于服务器端javascript :一种运行于客户端的脚本语言,动态性.JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的 ...

  3. noi 8780 拦截导弹

    题目链接: http://noi.openjudge.cn/ch0206/8780/ LDS http://paste.ubuntu.com/23402528/

  4. 网页设计中常用的19个Web安全字体

    来自http://www.jb51.net 在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体.但多数情况 ...

  5. ado.net C#如何实现数据库增删改查

    ado.net数据库访问技术将数据库中的数据,提取到内存中,展示给用户看还可以将内存中的数据写入数据库中去 并不是唯一的数据库访问技术,但是它是最底层的数据库访问技术也就是说是最麻烦但是是最不可缺少的 ...

  6. Cheatsheet: 2015 06.01 ~ 06.30

    Web The Front-End Optimization Checklist [ASP.NET 5] Production Ready Web Server on Linux. Kestrel + ...

  7. 使用nodewebx进行前后端开发环境分离

    下载nodewebx(windows环境) npm install nodewebx npm install inherits 为什么要下载inherits,因为nodewebx依赖它... 构建目录 ...

  8. createjs 更新

    使用0.8.2版本 不在需要单独 引入 MovieClip 文件了

  9. iOS核心动画学习整理

    最近利用业余时间终于把iOS核心动画高级技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,对应其中一 ...

  10. supervisor安装和配置

    直接命令 easy_install supervisor 如果报错先安装 yum install python-setuptools,再上面一条命令: 安装成功后显示finished,我们再次进行py ...