jQuery侧边栏固定

原文链接： http://www.cnblogs.com/yqlog/p/5592711.html

<!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>

转载于:https://www.cnblogs.com/yqlog/p/5592711.html

猜你喜欢