<!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. C#网络爬虫

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

  2. Lost Cows(线段树 POJ2182)

    Lost Cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10354 Accepted: 6631 Descriptio ...

  3. Linux WordPress博客的安装

    1:新建文件夹

  4. Shell基本功能&配置&Oh-My-Zsh

    http://blog.csdn.net/yangcs2009/article/details/45720193

  5. Windows server 2012 AD DS 搭建步骤

    服务器版本:Windows server 2012 1.  配置网络,由于本机会搭建DNS服务器,因此首选DNS服务器设置为127.0.0.1 2.  打开服务器管理器 3.  点击添加角色和功能,下 ...

  6. 安装DotNetCore.1.0.0-VS2015Tools.Preview2失败解决方案

    1.把安装文件放入非系统盘 2.命令行带参数运行: DotNetCore.1.0.0-VS2015Tools.Preview2.0.1.exe SKIP_VSU_CHECK=1 或 DotNetCor ...

  7. PHP 可变长度参数列表

    In PHP 5.6 and later, argument lists may include the ... token to denote that the function accepts a ...

  8. jQuery通过判断 checkbox 元素的 checked 属性，判断 checkbox是否被选中

    jQuery设置复选框的属性<input type="checkbox"/> $("input").attr("checked" ...

  9. hdu 2177 取(2堆)石子游戏（威佐夫博奕）

    题目链接:hdu 2177 这题不是普通的 Nim 博弈,我想它应该是另一种博弈吧,于是便推 sg 函数打了个 20*20 的表来看,为了方便看一些,我用颜色作了标记,打表代码如下: #include ...

  10. do while(false)实用技巧

    今天看项目源码的时候发现有些地方用了do{} while(false)的用法,查了下发现这样确实有些优点,mark下. 1.最重要的优点,用在略微复杂的宏定义中. #define AB1 a; b; ...