繁体   English   中英

开始滚动之前如何不将元素隐藏在具有动态高度的固定顶部标题下

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

我正在尝试创建具有动态高度的标头,并在滚动时固定在页面顶部(在整个滚动过程中可见)。 动态高度的原因是由于浏览器的大小调整,因此,在标头中的文本换行时,标头的高度会增加。

因此,增加的高度在开始滚动之前覆盖了主体的一部分。 尽管我已经尝试将padding-top: YYpx添加到主体,但是当标题的高度发生变化时,它会覆盖主体的元素。 基本上,我希望有2个连续的容器,但彼此不重叠,而第1个容器在滚动第2个容器时会在顶部粘住。

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

我已经为此苦苦挣扎了几天,尝试了一下 ,但是.header-container覆盖了部分背景,这不是我想要的。 我试图将navbar用作标题,但事实证明,这实际上限制了我可以放入的内容,因此我制作了一个自定义标题,而不是固定在顶部。

之前(不使用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部分内容。

我仍然希望页眉固定在页面顶部,并且main内容可以使用整页滚动条滚动。

正如您在此处看到的那样 ,没有简单的方法来动态固定标头高度。 大多数解决方案涉及设置定义的标头高度或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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM