html 区段固定标题重叠卷轴

amrnrhlw 于 2022-11-20 发布在其他

关注(0)|答案(2)|浏览(138)

我对html和css很陌生。浏览过以前问过的类似问题，但没有一个解决方案似乎对我有效。基本上我有这样的情况：
Situation。
所需的效果是内容通过半透明标题可见，但标题不应与滚动条重叠。
HTML是

<body>
    <div class="flex">
        <nav>

        </nav>
        <div class="container">
            <header>

            </header>
            <div class="content">
                some random text
            </div>
        </div>
    </div>
    <footer>

    </footer>
</body>

CSS是

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.flex{
    display: flex;
}

nav{
    flex: 0 0 20rem;
    background-color: black;
    height: 90vh;
}

.container{
    background-color: blue;
    flex-grow: 1;
    height: 90vh;
    overflow-y: auto;
    padding-top: 100px;
}

header{
    height: 80px;
    position: fixed;
    top: 0;
    left: 20rem;
    right: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);

}
.content{
    height: 2000px;
    color: white;
}

footer{
    height: 10vh;
    background-color: gray;
}

我找到的唯一解决方案是在header {right}中放入一个等于滚动条宽度的值，但这当然不是对所有浏览器都可靠，所以这只是一个技巧，而不是一个真实的的解决方案。
已尝试使用粘滞，但标题无法按预期覆盖内容。
尝试将标题直接放在内容中，但也不起作用。

Html

来源：https://stackoverflow.com/questions/74501021/section-fixed-header-overlapping-scrollbar

2条答案

按热度按时间

waxmsbnn1#

如果我没猜错的话，没有只使用CSS的解决方案。你必须添加JS。下面是代码。

<div class="flex">
    <nav>

    </nav>
    <div class="container" id="cntnr">
        <header id="hdr">

        </header>
        <div class="content">
            some random text
        </div>
    </div>
</div>
<footer>

</footer>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.flex{
    display: flex;
}

nav{
    flex: 0 0 20rem;
    background-color: black;
    height: 90vh;
}

.container{
    background-color: blue;
    flex-grow: 1;
    height: 90vh;
    overflow-y: auto;
    padding-top: 100px;
    position: relative;
}
.container.sticky{
    padding-top:0px;
}

header{
    height: 80px;
    top: 0;
    left:0;
    width:100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);
    position:absolute;

}
header.sticky{position:sticky;top:0}
.content{
    height: 2000px;
    color: white;
}

footer{
    height: 10vh;
    background-color: gray;
}

JS系统

<script type="text/javascript">
    var cntnrScrll = document.getElementById("cntnr");
    var hdr = document.getElementById("hdr");

cntnrScrll.onscroll = function()  { scrollFunction() };

function scrollFunction() {
  if (cntnrScrll.scrollTop > 0 ) {
    hdr.classList.add("sticky");
    cntnrScrll.classList.add("sticky");
  } else {
    hdr.classList.remove("sticky");
    cntnrScrll.classList.remove("sticky");
  }
}
</script>

赞(0）回复(0）举报 2022-11-20

uurity8g2#

您可以在.container上添加z-index，这样它的滚动条将显示在其余元素上：
（注意：z-index也需要一个非静态位置（默认值）才能正常工作）

.container{
    position: relative;
    z-index: 100;
    background-color: blue;
    flex-grow: 1;
    height: 90vh;
    overflow-y: auto;
    padding-top: 100px;
}

我设置了100，这样您还可以在中间的其他元素上添加z索引。但现在1也可以实现此效果

赞(0）回复(0）举报 2022-11-20

我来回答

html 区段固定标题重叠卷轴

2条答案

相关问题

热门标签

最新问答