Question

正如你在下面的演示中看到的，红色背景颜色的内容没有被粘性导航栏隐藏。

我的问题是：

我应该怎么做才能纠正这个问题？即内容不会显示在导航栏的位置。
虽然我已经设置了 overflow-x: auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main {
            height: 100px;
            max-width: 100px;
            overflow-x: auto;
        }
        .nav {
            position: sticky;
            top: 0;
            left: 0;
        }
        .rows {
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            background: #da1039;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="nav">navnavnavnavnavnavnavnavnavn</div>
        <div class="rows">
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
        </div>

    </div>

</body>
</html>

Answer 1

给.nav一些background-color：

.nav { 
                position: sticky; 
                display: inline-block;
                top: 0;
                left: 0;
                background-color: white;
            }

并对 .row

进行以下更改

.rows {
            display:inline-block;
            background: #da1039;
        }

最终代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main {
            height: 100px;
            max-width: 100px;
            overflow-y: auto;
        }
        .nav { position: sticky; 
            display: inline-block;
            top: 0;
            left: 0;
            background-color: white;
        }
        .rows {
            display:inline-block;
            background: #da1039;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="nav">navnavnavnavnavnavnavnavnavn</div>
        <div class="rows">
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
            <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
        </div>

    </div>

</body>
</html>

Answer 2

尝试为 .nav 类添加背景颜色：

.nav {
    background-color: white
}

然后内容应该隐藏在粘性导航后面。

Answer 3

您可以将 .nav 的位置更改为固定

.nav {
    position: fixed;
    top: 0;
    left: 0;
}

Answer 4

您需要将 overflow-y 属性添加到 rows 类，因此它只能滚动通过此元素而不是整个 main div

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .main {
        height: 100px;
        max-width: 100px;
        padding-top: 7px;
        overflow-x: auto;
        overflow-y: hidden;
      }
      .nav {
        position: sticky;
        top: 0;
        left: 0;
        max-width: 100px;
      }
      .rows {
        max-width: 100%;
        max-height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        background: #da1039;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="nav">loremipsumdolorsitamet</div>
      <div class="rows">
        <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
        <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
        <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
        <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
        <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
        <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
        <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
        <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
        <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
        <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
        <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
      </div>
    </div>
  </body>
</html>

Answer 5

您可以尝试为导航栏设置背景颜色，例如白色或黑色。但是，如果您要设置为黑色，请确保将导航内容颜色更改为白色。

.nav {
    position: sticky;
    top: 0;
    left: 0;
    background-color: white;
}

Answer 6

这应该有效。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .main {
      height: 150px;
      max-width: 150px;
      overflow-x: auto;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      background: #da1039;
    }
    
    .nav {
      position: sticky;
      top: 0;
      left: 0;
      background: #FFFFFF;
      z-index: 999;
    }
  </style>
</head>

<body>


  <div class="main">
    <div class="nav">Haha i don't move(sticky nav)</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
  </div>

</body>

</html>

参考文献

>My CSS instincts
>
>Stackoverflow

粘性导航栏不隐藏可滚动元素

6 个答案:

参考文献