如何在开始滚动之前不使用动态高度隐藏 fixed-top header 下的元素

Question

我正在尝试创建一个具有动态高度的 header 并在滚动时固定在页面顶部（在整个滚动过程中可见）。动态高度的原因是由于浏览器调整大小，所以当 header 中的文本被换行时， header 的高度增加了。

因此，增加的高度覆盖了滚动开始前的部分主体body。虽然我已经尝试将 padding-top: YYpx 添加到主 body，但当 header 的高度发生变化时，它会覆盖主 body 的元素。基本上，我想有 2 个连续的容器但不相互重叠，并且在滚动第二个容器时第一个容器会粘在顶部。

我想使用整个页面进行滚动，而不是只在第二个容器中使用滚动条。如果这不可能，那么也可以在第二个容器内滚动作为答案，前提是第二个容器的内容将根据第一个容器的新高度向下移动。

我已经为此苦苦挣扎了几天，我尝试了，但是 .header-container 覆盖了部分背景，这不是我想要的。我试图将导航栏用作 header，但事实证明它确实限制了我可以放入的内容，所以我定制了一个 header 而不是固定在顶部。

之前（不使用 CSS @media）： https://jsfiddle.net/q19of4j6/1/

之后（我尝试使用 CSS 手动移动第二个容器）： https://jsfiddle.net/q19of4j6/

调整上面jsfiddle的大小来查看问题。

使用@media 移动容器对我来说不可行。

我现在拥有的：

CSS

.custom-navbar {
  padding: 0.5rem 1rem;
}
body > main {
  padding-top: 112px;
}

@media (max-width: 1153px) {
  body > main {
    padding-top: 136px;
  }
}
@media (max-width: 955px) {
  body > main {
    padding-top: 160px;
  }
}

HTML

<body>
    <header>
        <!--Fixed navbar-->
        <nav class="custom-navbar fixed-top navbar-light bg-light">
        <!-- Contents in the header that I wish to keep at the top while scrolling-->
        </nav>
    </header>
    <main role="main">
        <div class="container-fluid">
            <table class="table table-striped table-bordered dataTable" cellspacing="0"
             width="100%" role="grid">
            <!--Contents of table, and contents that will move while scrolling-->
            </table>
        </div>
    </main>
</body>

我希望在调整浏览器宽度（尚未开始滚动）时，main 中的内容将根据 header 的新高度移动。

但是现在，header高度增加时，覆盖了main的部分内容。

我仍然希望 header 固定在页面顶部，main 中的内容可以使用整页滚动条滚动。

Answer 1

您可以 see here，没有简单的方法可以动态固定 header 高度。大多数解决方案涉及设置定义的 header 高度或 JS。

IMO，最简单的解决方案是使用 position: sticky 而不是 position: fixed:

https://www.codeply.com/go/ElHS24d2vT

<header class="sticky-top">
    <!--Fixed navbar-->
    <nav class="custom-navbar navbar-light bg-light">
        <div>
            whateverlalallala
        </div>
    </nav>
</header>
<main role="main">
    <div class="container-fluid">
        <table class="table table-striped table-bordered dataTable" cellspacing="0" width="100%" role="grid"></table>
        <p style="background:red">1</p>
        <p style="background:blue">2</p>
        <p style="background:orange">3</p>
        <p style="background:green">4</p>
    </div>
</main>

如何在开始滚动之前不使用动态高度隐藏 fixed-top header 下的元素

How not to hide element under fixed-top header with dynamic height before start scrolling

html

css

bootstrap-4

fixed

sticky