Position:sticky 在网站 header 上不起作用

Question

我的网站有 left-aligned 垂直 header 和 right-aligned 文本 body。 header 内容太大，无法在网站上显示，我不想使用 overflow:scroll 之类的东西，而是隐藏不相关的部分 header 滚动。网站标题和“导航栏”应该留在页面上，直到到达页面底部。我设法使用 position:sticky 修复了标题。滚动时，不相关的信息部分消失了，如我所愿。但是，我想保留在下面的部分（导航）只是滚动。此外，网站标题在滚动后消失。

我试过各种方法，都没有成功：

使用 min-height 和 height 用于 header
将 header 的位置从 position:static 更改为 position:fixed，结果很奇怪（滚动时标题在页面上向下移动）
删除了 .wrapper 环境
我也尝试了这个 post () 的解决方案，但这破坏了页面的其他部分。具体来说，由于 <br> 中断，页面一直在滚动。删除它们后，我遇到了同样的问题。

下面是一个MWE。

.wrapper {
  width: 1060px;
  margin: 0 auto; }


header {
  width: 270px;
  float: left;
position: static;
top: 0px;
  max-height: 100%;
  }


  .heady {
  position: relative;
  background-color: white;
}

  .headx {
  position: sticky;
  background-color: white;
 z-index:10;
}

#header01 {
  top: 0px;
  padding-bottom: 1em;
}

#header02 {
  top: 48px;
  z-index: 9 !important;
}



section {
  width: 700px;
  float: right;
  padding-bottom: 50px; }

    <body>
    <div class="wrapper">

        <header>
            <div class="header">
                <div class="headx" id="header01">
                    <h1> My title</h1>
                </div>

                <div class="heady">
                    <h2> Irrelevant information </h2>
                    <p>This text should disappear</p>
                    <p>This text should disappear</p>
                    <p>This text should disappear</p>
                    <p>This text should disappear</p>
                </div>

                 <div class="headx" id="header02">
                    <h2> Navigation </h2>
                    <p> This text should stay (below title) </p>
                    <p> This text should stay (below title) </p>
                    <p> This text should stay (below title) </p>
                    <p> This text should stay (below title) </p>
                    <p> This text should stay (below title) </p>
                    <p> This text should stay (below title) </p>
                </div>
            </div>
        </header>

        <section>
            <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 

            <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 
<p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 
<p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 
<p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 
<p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 

            <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 

        </section>

Answer 1

首先，在创建布局时切勿使用浮动。那是 10-20 年前在网络上使用的东西。使用 flex 或 grid。

我删除了一些 CSS 代码和 .header 元素。

我添加了一些新的 CSS 行，我用一个完整的空行将其与旧的 CSS 代码分开。

最大的变化发生在 .wrapper 上，我将 1060 像素的固定宽度更改为 1060 像素的最大宽度，以使页面更具响应性。我还添加了 display: flex 以从 header 和 section.

中创建列

我在 header 中添加了灰色背景，只是为了展示布局的工作原理..

.wrapper {
  max-width: 1060px;
  
  width: 100%;
  margin: 0 auto;
  display: flex;
}

header {
  width: 270px;
  /*float: left;
  top: 0px;
  max-height: 100%;*/
  
  background-color: grey;
  padding: 0.5rem;
}

/*.heady {
  /*position: relative;
  background-color: white;
}*/

.headx {
  position: sticky;
  background-color: white;
  top: 0px;
  z-index: 10;
}

#header01 {
  padding-bottom: 1em;
}

#header02 {
  top: 48px;
  z-index: 9 /*!important*/;
}

/*section {
  width: 700px;
  padding-bottom: 50px;
}*/

<body>
  <div class="wrapper">

    <header>
      <!--<div class="header">-->
        <div class="headx" id="header01">
          <h1> My title</h1>
        </div>

        <div class="heady">
          <h2> Irrelevant information </h2>
          <p>This text should disappear</p>
          <p>This text should disappear</p>
          <p>This text should disappear</p>
          <p>This text should disappear</p>
        </div>

        <div class="headx" id="header02">
          <h2> Navigation </h2>
          <p> This text should stay (below title) </p>
          <p> This text should stay (below title) </p>
          <p> This text should stay (below title) </p>
          <p> This text should stay (below title) </p>
          <p> This text should stay (below title) </p>
          <p> This text should stay (below title) </p>
        </div>
      <!-- </div> -->
    </header>

    <section>
      <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>

      <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>
      <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>
      <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>
      <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>
      <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>

      <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>

    </section>

Position:sticky 在网站 header 上不起作用

Position:sticky does not work on website header

html

css

css-position

sticky