有没有办法让即时贴考虑到页面上的其他即时贴?
例如:
body {
display: flex;
min-height: 2000px;
flex-direction: column;
}
#header {
height: 40px;
flex: 0 0 auto;
position: sticky;
top: 0;
background: yellow;
}
#footer {
flex: 0 0 auto;
height: 20px;
}
#main {
display: flex;
flex: auto;
background: blue;
}
#side {
width: 200px;
background: red;
}
#side > div {
position: sticky;
top: 0px;
}
<div id="header">header</div>
<div id="main">
<div id="side">
<div>side</div>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">footer</div>
请注意,如果我向下滚动,标题将与侧边栏重叠,因为它们具有相同的 top
位置。
要修复,我必须使侧边栏的顶部位置采用标题高度的值
body {
display: flex;
min-height: 2000px;
flex-direction: column;
}
#header {
height: 40px;
flex: 0 0 auto;
position: sticky;
top: 0;
background: yellow;
}
#footer {
flex: 0 0 auto;
height: 20px;
}
#main {
display: flex;
flex: auto;
background: blue;
}
#side {
width: 200px;
background: red;
}
#side > div {
position: sticky;
top: 40px;
}
<div id="header">header</div>
<div id="main">
<div id="side">
<div>side</div>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">footer</div>
但是如果标题的高度可变呢?我可以告诉浏览器以某种方式定位便签,以免它们与其他便签重叠吗?
最佳答案
我认为您需要为此使用 javascript。首先获取标题的高度,然后使用该值设置侧边栏的顶部位置。恐怕我不知道有任何纯 css 的方法。
如果您使用的是 jQuery,则只需使用 .height() 方法,否则您可以使用此方法:
var clientHeight = document.getElementById('myDiv').clientHeight;
var offsetHeight = document.getElementById('myDiv').offsetHeight;
offset 方法获取带有任意 padding 和 borders 的高度。
关于css - 位置粘性自动 "top"位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28839545/