<!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. urllib编码

    python: 1.unquote 2.decode 3.encode

  2. C#网络爬虫

    CronMaker is a utility which helps you to build cron expressions. CronMaker uses Quartz open source ...

  3. 【转】Struts1.x系列教程（4）：标签库概述与安装

    转载地址:http://www.blogjava.net/nokiaguy/archive/2009/01/archive/2009/01/archive/2009/01/archive/2009/0 ...

  4. 结对编程—黄金点游戏WinForm单机版

    本小游戏场景来自邹欣老师的<移山之道>一书: "阿超的课都是下午两点钟,这时班上不少的同学都昏昏欲睡,为了让大家兴奋起来,阿超让同学玩一个叫"黄金点"的游戏: ...

  5. js相关总结

    1.都是gbk格式的页面使用ajax请求,发起前改变编码格式,可避免乱码. $.ajaxSetup({     'beforeSend' : function(xhr) {         xhr.o ...

  6. Stockbroker Grapevine(floyd+暴力枚举)

    Stockbroker Grapevine Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 31264 Accepted: 171 ...

  7. ASP.NET多个Button的页面，回车执行按钮事件（转）

    主要有两种实现方法分别是:JavaScript的方法与Panel的方法 一.JavaScript的方法 ①单输入框(文本框)单按钮的实现方法 以下功能实现:在输入框中输入内容之后,按回车键就执行按钮事 ...

  8. [问题2015S13] 复旦高等代数 II（14级）每周一题（第十四教学周）

    [问题2015S13]  设 \(A=(a_{ij})\) 为 \(n\) 阶实矩阵, 定义函数 \[f(A)=\sum_{i,j=1}^na_{ij}^2.\] 设 \(P\) 为 \(n\) 阶非 ...

  9. Key Figure、Exception Aggreagion、Non-Cumulative KeyFigure

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. 单据BE构建

    本节来构建单据BE1.新建单据BE实体项目,修改命名空间 2.引入单据基类如下图所示,在UFIDA.U9.Base.BaseBE.MetaData命名空间下将类Doc托至设计BE视图中 3.分别托2个 ...