relative相对定位实现—侧边栏固定

最新推荐文章于 2022-10-30 09:00:12 发布

shaonian1996

最新推荐文章于 2022-10-30 09:00:12 发布

阅读量1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_41179401/article/details/79362841

版权

javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

relative相对定位实现—侧边栏固定

问题：

1 什么事件？ 2 什么时候发生时间？ 3 事件函数什么？

思路：滚动条事件；在一定滚动范围内发生；让其重新定位。

思路：

1 添加滚动条事件：
window.οnscrοll=function(){}

2 求出滚动范围：

当滚动高度：scrollHeight>侧边栏据浏览器上方的距离150px且scrollHeight<中间高度-侧边高度+侧边据浏览器的高度；

3 事件函数：

重新定位：position：relative；top:'scrollHeight-150px';left:'0px';

为什么top值为scrollHeight-150px？

相对定位是相对于自己本身原来应该在的位置，当滚动条滚到左侧边栏时若不设置相对定位应该会随着鼠标下拉，侧边栏一直向上逐渐消失，设置了相对定位，想要相对与原来的位置保持某个高度不变，明显必须top越来越大，因为原来的位置是一直向上的，top值等于滚动到左侧边栏时，此时鼠标再往下滑的距离 = 鼠标总下滑的距离(scrollHeight)-左侧边栏距距离最上面的距离（150px)

bug:当scrollHeight<侧边栏据浏览器上方的距离或scrollHeight>中间高度-侧边高度+侧边据浏览器的高度

强行到顶或到底，出现原因是滚动过快。

ps:侧边栏必须先设置相对定位

html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>侧边栏固定</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="header"></div>
<div id="containter">
	<div id="left">导航栏</div>
	<div id="main">内容区</div>
	<div id="right">侧边栏</div>
</div>
<div id="footer"></div>
</body>
</html>

css:

*{
	padding:0;
	margin: 0;
}
#header{
	background: #333;
	height: 100px;
}
#containter{
	overflow: hidden;
	margin: 50px 0 0 100px;
}
#left{
	background: #ccc;
	margin-right: 100px;
	width: 300px;
	height: 400px;
	float:left;
}
#main{
	background: #666;
	margin-right: 100px;
	width: 400px;
	height: 1000px;
	float:left;
}
#right{
	background: #999;
	width: 200px;
	height: 400px;
	float:left;
}
#footer{
	background: blue;
	height: 100px;
	clear: both;
	margin-top: 150px;
}

javascript:

window.οnlοad=function(){
	var left=document.getElementById('left');
	var main=document.getElementById('main');
	var contentheight=main.offsetHeight-left.offsetHeight;
	window.οnscrοll=function(){
		var scrollHeight=document.documentElement.scrollTop;
		if(scrollHeight>150&&scrollHeight<contentheight+150){
			left.style.position='relative';
			left.style.left='0px';
			left.style.top=scrollHeight-150+'px';
		}else if(scrollHeight<=150){
			left.style.position='relative';
			left.style.left='0px';
			left.style.top='0px';
		}else{
			left.style.position='relative';
			left.style.left='0px';
			left.style.top=scrollHeight-150+'px';
		}
	}
}

图示：