87,922
社区成员
发帖
与我相关
我的任务
分享求教，如何做出这样的效果？
页面的布局是这样的：
B区是一些版块链接，C区是文章内容，我希望当文章很长的时候，随着滚动条向下滚，B区始终停靠在左边
但是直接用position：absolute也不对，因为我希望在A区被卷出屏幕外，B区顶到上边缘的时候才开始悬浮
请问我表达清楚了吗？
B区是一些版块链接，C区是文章内容，我希望当文章很长的时候，随着滚动条向下滚，B区始终停靠在左边
但是直接用position：absolute也不对，因为我希望在A区被卷出屏幕外，B区顶到上边缘的时候才开始悬浮
请问我表达清楚了吗？
...全文
请发表友善的回复…
发表回复
天际的海浪 2015-02-16
- 打赏
- 举报
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>title name</title>
<style type="text/css">
body {margin:0px;padding:0px;}
#a{background:#c2d5ed;width:100%;height:80px;}
#b{width:100px;height:200px;background:#ff6699;}
#b.absolute{position:absolute; left:0px; top:80px;}
#b.fixed{position:fixed; left:0px; top:0px;}
#c{margin-left:100px;width:auto;height:2000px;background:#ffff99;}
</style>
</head>
<body>
<div id="a">aaaaaaa</div>
<div id="b" class="absolute">bbbbbbb</div>
<div id="c">ccccccc</div>
<script>
window.onscroll=function(){
document.getElementById('b').className=document.documentElement.scrollTop>80?"fixed":"absolute";
}
</script>
</body>
</html>
slwsss 2015-02-15
- 打赏
- 举报
<style>
*{margin:0px;padding:0px;}
.a{background:red;width:100%;height:30px;}
.b{width:50px;height:200px;background:#c0c;left:0px;top:30px;position: absolute;}
.c{padding-left:50px;}
.d{width:10px;height:1000px;background:#ddd;}
</style>
<div class="a"></div>
<div class="b" id="b"></div>
<div class="c"><div class="d">aaaaaaaaaaaaaaaaaa</div></div>
<script>window.onscroll=function(){document.getElementById('b').style.top=window.scrollY>30?(window.scrollY+'px'):'30px';}</script>
