html - 当我仅使用 CSS 向下滚动时，如何使导航栏固定在顶部并变得透明？

Question

我是 html/css 的新手，我想仅使用 HTML/CSS 使导航栏在向下滚动变为透明时始终位于顶部。这是可能的？现在它让我发疯我无法在我的导航栏下制作背景图片。我应该在哪里更改 CSS 部分？ 这就是我希望成为的样子
[链接] https://frankyeah.github.io/Front-Enter/index.html

我所做的如下

HTML:

<nav>
     <div>
         <a href="" class="logo"><img src="./image/FE_logo-4.png"></a>
         Logo
     </div>

     <div class="navlist">
     <a href="">explore</a>
     <a href="">Skill</a>
     <a href="">login</a>
     </div>

     <div>
     <a href="" class="search"><img src="./image/FE_search_green.png"> 
     </a> 
     </div>
</nav>

<main>
     <div class="mainview"></div>
     <div class="mainview2"></div>
     <div></div>
     <div></div>
     <div></div>
</main>

CSS:


 <style>
        nav{
            display: flex;
            justify-content: space-between;
            flex-flow:row nowrap;
            position: fixed;
            width:100%;
            background-color: white;
            opacity:0.7;
            z-index:999 ;
            margin: 0 auto;
            padding: 0;
        }
        .logo>img{
            display: flex;
            flex-flow:row nowrap;
            width:50%;
            margin-top:5%;
            margin-left:20%;
        }
        .navlist{
            display: flex;
            flex-flow:row nowrap;
            width:40%;
            justify-content: space-evenly;
            margin-top:2.5%;
            margin-left:40%;
            font-family:"arial";
        }
        a:hover{
            color:  #66FFFF;
        }
        div a{
            text-decoration: none;
            color:#AAAAAA;
        }
        .search>img {
            display: flex;
            flex-flow:row nowrap;
            margin:30px 50px;
            width:20%;
        }
        .mainview{
    overflow: hidden;
    background-image:url("../image/key-visual.jpg");
    background-repeat:no-repeat;
    background-attachment:scroll; 
    background-size: cover;
    widows: 100%;
    height: 100%;
    padding-top: 50%; 
}
.mainview2{
    background-image:url("../image/second-img.jpg");
    background-attachment:scroll; 
    background-position:top left;
    background-repeat:no-repeat;
    background-size: cover;
    widows: 100%;
    height: 100%;
    padding-top: 50%; 
    margin: 0 0;
}
    </style>

我希望背景图片会在我的导航栏下方，并且当向下滚动导航栏时会透明，但出了点问题。

Answer 1

您无法检测滚动是否仅通过 css 发生。您必须使用 JavaScript/jQuery。

但是在您的网站示例中， header 看起来始终是透明的，并且它只是位于页面顶部的白色 div 之上。

尝试在页面顶部添加一个 div，并将其高度设置为与导航栏相同的高度，类似于网站。