Html 在到达顶部之前滚动元素
我在一个有固定导航栏的网站上工作。导航栏有一个透明的背景，位于整个页面的背景图像前面 问题是我希望以下元素消失在导航栏的正下方。但它们却在透明的导航栏后面滚动 我还没有发现可以在div#scrollwrapper中设置以下内容以在顶部滚动：124px。而是在透明导航后面滚动 HTMLHtml 在到达顶部之前滚动元素,html,css,scroll,offset,transparent,Html,Css,Scroll,Offset,Transparent,我在一个有固定导航栏的网站上工作。导航栏有一个透明的背景，位于整个页面的背景图像前面 问题是我希望以下元素消失在导航栏的正下方。但它们却在透明的导航栏后面滚动 我还没有发现可以在div#scrollwrapper中设置以下内容以在顶部滚动：124px。而是在透明导航后面滚动 HTML <html> <body> <div id="wrapper"> <nav></nav> <div id="scrollwrap
<html>
<body>
<div id="wrapper">
<nav></nav>
<div id="scrollwrapper"></div>
</div>
<footer></footer>
</body>
</html>
没有这样的“滚动”，你在这里所梦想的并不存在。您需要在其他地方应用滚动条（不是在整个页面上，而是仅在标题下方开始的容器上），或者为导航提供背景，以便将内容隐藏在其下方。您需要在导航中使用相同的背景图像，并在滚动页面时，您可以使用一些js更改导航中图像的背景位置，使其与主背景的移动相匹配-或者，由于您的背景是固定的，因此您不需要js位。还有，为什么要将背景放在伪元素中，而不是直接放在div上呢？Pete，那只是因为我可能想更改背景图像的不透明度。也许不是，那么它可以在一个div中运行。令人难以置信的是，这些函数都不存在。真的吗？难道你不能将它们包装成一个div，并在顶部添加一个与导航栏高度相同的边距吗？不，阿里，这不会改变滚动行为。
#wrapper{
min-height:100%;
position: relative;
display: block;
}
#wrapper:after{
background-image: url(../img/bg.jpg);
background-color: #0b0d89;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
content: "";
opacity: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.navbar {
background-color:
rgba(11, 13, 137, 0.5600000000000001);
max-width: 1140px;
margin: 0 auto;
position: sticky;
top: 0;
z-index: 1020;
}