gpt4 book ai didi

html - 具有透明性的粘性顶部菜单(仅滚动文档的一部分)

转载 作者:太空宇宙 更新时间:2023-11-04 14:11:32 25 4
gpt4 key购买 nike

我在页面顶部创建了一个粘性菜单,像往常一样将其设置为固定位置。

然后我意识到如果能看到背景中的图片调整div的不透明度就好了。

开始出现问题,因为当我滚动页面时,所有文本都显示在 div 后面,我不希望这样。

我试图找出一种方法来使用 overflow-y 只滚动页面的一部分,但它需要一个固定的高度才能工作。

我卡住了。有什么建议吗?

这是我工作的页面:

http://in2apps.com/nowa/

我只需要滚动内容框 div,但我不想给它一个固定的高度。

html代码:

<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body style="background-image:url('img/1.jpg')">
<div id="top-bar-box">
<div id="top-bar">
<div id="logo">
<a><img src="img/logo.png" alt="Logo"/></a>
</div>
<div id="top-menu">
</div>
</div>
</div>
<div id="content-box">
<div id="content">
<div class="icon"></div>
<h1>Título Principal</h1>
<h2>Título Secundario</h2>
<h3>Subtítulo</h3>
<p>... Text...</p>
</div>
</div>
</body>
</html>

以及 DIV 的 CSS:

#top-bar-box {
background-color: rgba(255, 255, 255, 0.5);
color: #b20000;
margin: 0 auto 20px auto;
text-align: center;
position: fixed;
width: 100%;
z-index: 1;
}

#top-bar {
height: 120px;
margin: 0 auto;
max-width: 960px;
}

#content-box {
position: relative;
top: 140px;
margin: 0 auto 20px auto;
}

#content {
background-color: rgba(255, 255, 255, 0.8);
margin: 0 auto;
max-width: 940px;
padding: 10px;
border-radius: 10px;
}

已编辑:

在此页面中,您可以看到执行@AlienWebguy 的解决方案后的结果。

http://in2apps.com/nowa/index4.php

最佳答案

CSS:

body {
overflow : hidden;
}

content-box {
overflow : scroll;
}

jQuery

$('#content-box').css('height', ($(window).height() - 140) + 'px');

关于html - 具有透明性的粘性顶部菜单(仅滚动文档的一部分),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20712632/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com