HTML/CSS - 我的 div 只是不粘,我不知道为什么
HTML/CSS - My div is just not being sticky and I do not know why
出于某种原因,我不明白为什么这不起作用。我唯一的困难:header div 只是不粘。
HTML:
<div class="header">
<div class="header-content">
<img src="mycoollogo.svg" class="logo" />
</div>
</div>
CSS:
.logo {
height: 3rem;
}
.header {
position: -webkit-sticky; /* Safari Support */
position: sticky;
height: 3.5rem;
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
background: var(--accent-color);
color: white;
}
.header-content {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 6rem;
margin-right: 6rem;
}
尝试添加一个您希望它粘贴的位置
position: sticky;
top: 0;
你的代码看起来不错,我看到的唯一问题是你应该使用 top:0
和 position sticky 来完成这项工作。
我在这里稍微修改了您的代码以使其可见使用下面的 运行 片段选项卡并尝试滚动,您的 header 现在应该是粘性的。
.logo {
height: 3rem;
}
.wrapper {
position: relative;
}
.header {
position: -webkit-sticky; /* Safari Support */
position: sticky;
top: 0;
height: 3.5rem;
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
background: var(--accent-color);
color: white;
}
.header-content {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 6rem;
margin-right: 6rem;
}
.top-content {
background: blue;
height: 100px;
position: sticky;
}
.bottom-content {
background: red;
height: 5000px;
}
<div class="wrapper">
<div class="top-content"></div>
<div class="header">
<div class="header-content">
<img src="mycoollogo.svg" class="logo" />
</div>
</div>
<div class="bottom-content"></div>
</div>
出于某种原因,我不明白为什么这不起作用。我唯一的困难:header div 只是不粘。
HTML:
<div class="header">
<div class="header-content">
<img src="mycoollogo.svg" class="logo" />
</div>
</div>
CSS:
.logo {
height: 3rem;
}
.header {
position: -webkit-sticky; /* Safari Support */
position: sticky;
height: 3.5rem;
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
background: var(--accent-color);
color: white;
}
.header-content {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 6rem;
margin-right: 6rem;
}
尝试添加一个您希望它粘贴的位置
position: sticky;
top: 0;
你的代码看起来不错,我看到的唯一问题是你应该使用 top:0
和 position sticky 来完成这项工作。
我在这里稍微修改了您的代码以使其可见使用下面的 运行 片段选项卡并尝试滚动,您的 header 现在应该是粘性的。
.logo {
height: 3rem;
}
.wrapper {
position: relative;
}
.header {
position: -webkit-sticky; /* Safari Support */
position: sticky;
top: 0;
height: 3.5rem;
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
background: var(--accent-color);
color: white;
}
.header-content {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 6rem;
margin-right: 6rem;
}
.top-content {
background: blue;
height: 100px;
position: sticky;
}
.bottom-content {
background: red;
height: 5000px;
}
<div class="wrapper">
<div class="top-content"></div>
<div class="header">
<div class="header-content">
<img src="mycoollogo.svg" class="logo" />
</div>
</div>
<div class="bottom-content"></div>
</div>