一个fix定位的问题

yaotomo 2018-04-13 09:50:46
想实现的效果是固定div的位置,当下拉滚动条时,其位置不发生变化
但这个div并不是固定在顶部或浏览器的两侧,也就是说并不相当于整个窗口固定,而是相对于页面的一个div(其父元素)定位
但是position:fixed只能相对窗口定位
下面代码的运行效果,下拉滚动条,红色div位置相对于窗口不变化,而我想相对于蓝色的div位置不变化
这里我写死蓝色div的距离窗口顶部距离为150px,实际上我并不知道距离浏览器顶部和左侧右侧的距离。也就是说我不能写成position:fixed;top:150px。

<html>
<head>
<title></title>
</head>
<body>
<div style='margin-top:150px;background-color:blue'>
<div style="position:fixed;top:100px;left:60px;width:180px;background-color:red;">
这个是固定的DIV
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
...全文
1059 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2018-04-14
  • 打赏
  • 举报
回复

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
}
</style>
</head>
<body>
<div id="par" style='margin-top:150px; margin-left: 200px; background-color:blue; position: relative;'>
<div id="fix" style="position: absolute;top:0px;left:0px;width:100%;background-color:red;">
这个是固定的DIV
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script type="text/javascript">
window.onscroll = function () {
	var fix = document.getElementById("fix");
	var par = document.getElementById("par");
	var st = document.documentElement.scrollTop || document.body.scrollTop;
	var pt = par.offsetTop;
	if (st>pt) {
		fix.style.left = par.offsetLeft + "px";
		fix.style.width = par.offsetWidth +  "px";
		fix.style.position = "fixed";
	} else {
		fix.style.left = "0px";
		fix.style.width = "100%";
		fix.style.position = "absolute";
	}
}
</script>
</body>
</html>

yaotomo 2018-04-14
  • 打赏
  • 举报
回复
简单地说,红色div已经保证top是相对于父容器的,但是left还是相对于整个浏览器的 应该怎么解决呢,再次请求帮助,感激不尽
yaotomo 2018-04-14
  • 打赏
  • 举报
回复
引用 2 楼 jslang 的回复:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="par" style='margin-top:150px;background-color:blue; position: relative;'>
<div id="fix" style="position: absolute;top:0px;left:60px;width:180px;background-color:red;">
这个是固定的DIV
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script type="text/javascript">
window.onscroll = function () {
var fix = document.getElementById("fix");
var par = document.getElementById("par");
var st = document.documentElement.scrollTop || document.body.scrollTop;
var pt = par.offsetTop;
fix.style.position = st>pt ? "fixed" : "absolute";
}
</script>
</body>
</html>



谢谢前辈指点,在一个页面上已经实现了这个效果
但是还有一点问题,我的页面结构是下面这样的

如果下拉滚动条使红色div到浏览器顶部(header位置也是随着滚动条拉动变化的),红色div的position的left为60px,是相对于整个浏览器的,效果如图

我想让他的左侧相对于蓝色div left为60px,而不超出蓝色div的范围,宽度也在蓝色div之内。效果如图
yaotomo 2018-04-13
  • 打赏
  • 举报
回复
再补充一点,红色的div要保持在蓝色div的顶部,如果滚动条向下拉动,蓝色div到达页面顶部,红色div就要保持在页面顶部固定
天际的海浪 2018-04-13
  • 打赏
  • 举报
回复

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
}
</style>
</head>
<body>
<div id="par" style='margin-top:150px;background-color:blue; position: relative;'>
<div id="fix" style="position: absolute;top:0px;left:60px;width:180px;background-color:red;">
这个是固定的DIV
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script type="text/javascript">
window.onscroll = function () {
	var fix = document.getElementById("fix");
	var par = document.getElementById("par");
	var st = document.documentElement.scrollTop || document.body.scrollTop;
	var pt = par.offsetTop;
	fix.style.position = st>pt ? "fixed" : "absolute";
}
</script>
</body>
</html>

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧