<!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. javaWeb 数据库连接池连接数据库

    需要的公共jar包 mysql-connector-java-5.0.8-bin.jar(mysql数据库)   ojdbc14.jar(oracle数据库) A.DBCP 需要jar包: commo ...

  2. 相似性度量(Similarity Measurement)与“距离”(Distance)

    在做分类时常常需要估算不同样本之间的相似性度量(Similarity Measurement),这时通常采用的方法就是计算样本间的“距离”(Distance).采用什么样的方法计算距离是很讲究,甚至关 ...

  3. C中字符串的几种定义方法及说明

    在C中定义字符串有下列几种形式:字符串常量,char数组,char指针 1.字符串常量 即:位于一对双括号中的任何字符.双引号里的字符加上编译器自动提供的结束标志\0字符,作为 一个字符串存储在内存中 ...

  4. Balsamiq Mockups 注册码

    Blacklist: Organization name: Rick DongSerial Key: eNrzzU/OLi0odswsqgnKTM5WcMnPS1eoMTQyMjexMDQyAIEa5 ...

  5. GZFramework代码生成器插件使用教程

    代码生成器分两种 1.基于独立exe生成程序 直接运行软件目录下GZFrameworkCodeGenerate.exe文件即可 2.基于VS插件生成 目录中分为两部分:全局缓存和VS插件 1.添加全局 ...

  6. abort终止正在进行中的的ajax请求

    核心:调用XMLHttpRequest对象上的abort方法 jQuery的ajax方法有自己的超时时间设置参数:   $.ajax({type:'POST', url:'b.php', data:' ...

  7. 《BI项目笔记》数据源视图设置

    目的数据源视图是物理源数据库和分析维度与多维数据集之间的逻辑数据模型.在创建数据源视图时,需要在源数据库中指定包含创建维度和多维数据集所需要的数据表格和视图.BIDS与数据库连接,读取表格和视图定义, ...

  8. Model Binding

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  9. SVM学习（续）

    SVM的文章可以看:http://www.cnblogs.com/charlesblc/p/6193867.html 有写的最好的文章来自:http://www.blogjava.net/zhenan ...

  10. codeforces 446A DZY Loves Sequences

    vjudge 上题目链接:codeforces 446A 大意是说最多可以修改数列中的一个数,求最长严格递增的连续子序列长度. 其实就是个 dp 的思想,想好思路后交上去没想到一直 wa 在第二个测试 ...