【发布时间】：2021-04-28 01:21:24
【问题描述】：
我有一个带有左对齐垂直标题和右对齐文本正文的网站。标题内容太大而无法在网站上显示，我不想使用overflow:scroll 之类的东西，而是隐藏 滚动时标题的无关部分。网站标题和“导航栏”应保留在页面上，直到到达页面底部。我设法使用position:sticky 修复了标题。滚动时，不相关的信息部分会消失，如我所愿。但是，我想保留在下面的部分（导航）只是滚动。此外，网站标题在滚动后会消失。
我尝试了各种方法，但均未成功：
- 标题使用
min-height和height - 将标题位置从
position:static更改为position:fixed，结果很奇怪（滚动时标题在页面上向下徘徊） - 删除了
.wrapper环境 - 我也尝试了这篇文章 (pure CSS multiple stacked position sticky?) 中的解决方案，但这破坏了页面的其他部分。具体来说，由于
<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>【问题讨论】：
-
你好，@Jonathan 你想在顶部导航粘性并在左侧粘贴标题吗？我说的对吗？
-
嗨@ZealousWeb，不是真的，我希望左侧的标题、“无关信息”和导航，但不相关的信息在滚动时消失以节省空间。
标签： html css css-position sticky