时间戳

首页 > 解决方案 > 位置：粘性在网站标题上不起作用

html - 位置：粘性在网站标题上不起作用

问题描述

我有一个带有左对齐垂直标题和右对齐文本正文的网站。标题内容太大而无法在网站上显示，我不想使用类似的东西overflow:scroll，而是在滚动时隐藏标题的不相关部分。网站标题和“导航栏”应保留在页面上，直到到达页面底部。我设法使用position:sticky. 滚动时，不相关的信息部分会消失，如我所愿。但是，我想保留在下面的部分（导航）只是滚动。此外，网站标题在滚动后消失。

我尝试了各种方法，但均未成功：

下面是一个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>

标签： htmlcsscss-positionsticky

解决方案

首先，在创建布局时不要使用浮动。这是 10 到 20 年前在网络上使用的东西。使用弹性或网格。

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

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

最大的变化是对.wrapper.，我将 1060px 的固定宽度更改为 1060px 的最大宽度，以使页面更具响应性。我还添加了用和display: flex制作列。headersection

我添加了一个灰色背景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>

推荐阅读