时间戳

首页 > 解决方案 > 在到达顶部之前滚动元素

html - 在到达顶部之前滚动元素

问题描述

我正在一个带有固定导航栏的网站上工作。导航栏具有透明背景，位于整个页面的背景图像前面。

问题是我希望以下元素在导航栏下方消失。但相反，它们在透明导航栏后面滚动。

我还没有发现要在 div#scrollwrapper 中设置以下内容以在顶部滚动：124px。而是在透明导航后面滚动。

HTML

<html>
<body>
  <div id="wrapper">
    <nav></nav>
    <div id="scrollwrapper"></div>
  </div>
<footer></footer>
</body>
</html>

CSS

#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;
 }

标签： htmlcssscrolloffsettransparent

解决方案

推荐阅读