CSS 当元素在另一个元素中时，位置粘性无法正常工作

Question

我试图让一个元素粘在顶部，但当它在另一个 div 中时它不起作用。 header div 本身没有任何样式。

nav {
    height: 50px;
    background: lightgreen;
    position: sticky;
    top: 0;
}

main {
    height: 200vh;
    background: linear-gradient(180deg, black 0%, white 100%);
}

aside {
    height: 30px;
    background: red;
}

<header>
  <aside></aside>
  <nav></nav>
</header>
<main></main>

如果我在 header 元素上应用粘性，它会起作用，但它也会拖动 aside 元素，我只希望导航元素是粘性的：

header {
    position: sticky;
    top: 0;
}

nav {
    height: 50px;
    background: lightgreen;
}

main {
    height: 200vh;
    background: linear-gradient(180deg, black 0%, white 100%);
}

aside {
    height: 25px;
    background: red;
}

<header>
    <aside></aside>
    <nav></nav>
</header>
<main></main>

这极大地限制了我使用粘性属性可以做的事情（如果有意的话）。我找到的唯一解决方案是删除 header 元素并将所有元素保留在 body.

中

Answer 1

Stiky position 作用于父元素内部。因此，如果您的元素直接位于主体下方，它将按照您的需要运行。您可以使用 javascript 来固定整个页面。

window.onload=window.onscroll=window.onresize=function(){
var s=window.scrollY;
var mp=Math.max(0,250-s);
document.getElementById("stiky").style.top = mp+"px";
}

#parent{height:3000px;}
#child{height:300px; background:#999}
#stiky{position:fixed; width:100%; height:50px;background:#ff0}

<div id="parent">
<div id="child">
<div id="stiky"></div>
</div>
</div>

Answer 2

具有position:sticky的元素；恐怕只有相对于它的直接容器是固定的，所以不求助于 Javascript 的最佳解决方案是将导航移动到 main.

中

Answer 3

如果您的 aside 始终具有固定高度，请使用负顶部值并使父容器具有粘性：

nav {
  height: 50px;
  background: lightgreen;
}

header {
  position: sticky;
  top: -30px;
}

main {
  height: 200vh;
  background: linear-gradient(180deg, black 0%, white 100%);
}

aside {
  height: 30px;
  background: red;
}

<header>
  <aside></aside>
  <nav></nav>
</header>
<main></main>

CSS 当元素在另一个元素中时，位置粘性无法正常工作

CSS position sticky doesn't work properly when element is inside another

html

css

header

css-position

sticky