<!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. 谈谈JDK线程的伪唤醒

    在JDK的官方的wait()方法的注释中明确表示线程可能被"虚假唤醒",JDK也明确推荐使用while来判断状态信息.那么这种情况的发生的可能性有多大呢? 使用生产者消费者模型来说 ...

  2. WPF:设置MenuItem多种不同状态图标

    需求描述: 给MenuItem内部的子Image设置默认图标(鼠标leave).鼠标hover图标.和选中时的图标. 注:是给Menu内个别MenuItem修改,并且是弹出子菜单. 问题描述: 1)前 ...

  3. POJ 1852 Ants

    题目的意思是说一个长度为m的杆,上面有n个蚂蚁,告诉每个蚂蚁的初始位置,每个蚂蚁速度都是一样的,问所有的蚂蚁离开杆的最短和最长时间是多少. 模拟题,所有的蚂蚁看成一样的,可以这样理解,即使相撞按反方向 ...

  4. plsql和oracle错误记录

    昨天oracle密码搞忘记了,根据网上方法弄了不管用,索性直接删掉数据库,然后重建,再次登陆的时候既然报错, 说我适配器错误,我靠,这是闹哪样,找了好多方法,都解决不了. 然后上班问一个oracle大 ...

  5. ADB指令

    对于ADB指令的应用,首先应该配置环境,将文件所在路径复制到高级系统设置里面的环境变量path,然后就可以在命令符上进行ADB的指示 例如adb kill-server是关掉活动 adb start- ...

  6. Editplus配置VC++(1) 及相关注意事项

    下篇文章:Editplus配置VC++(2) 与/d1reportSingleClassLayout 原本用的是VC++2010 现在换成了Visual Studio 2013,editplus相关配 ...

  7. 405 Method Not Allowed

    今天在发布一个网站的时候遇到 标题上的问题,一直不明白是为何,刚开始以为是我的程序写的有问题,随即将项目发给同事来发布试试,在他的IIS上发布却没出现问题,一切正常,这可就怪了,于是想到了应该是IIS ...

  8. Creating Custom Login Screen In Oracle Forms 10g

    Below is the example plsql unit to validate login credentials and after successful validation open a ...

  9. java高薪之路__006_多线程

    线程的创建有两种方式 package learn.JavaBasics.Class; public class ThreadDemo extends Thread { private static i ...

  10. openssl证书相关

    http://blog.csdn.net/modianwutong/article/details/43059435 http://www.cnblogs.com/E7868A/archive/201 ...