Question

我知道这听起来很有趣，但我有一个导航栏，由flexbox固定在页面顶部。它看起来很棒，但你可以看到页面内容滚动它。如果有意义的话，我需要内容消失并从导航栏底部的导航栏下滚动。

这是我的代码，所以你可以尝试一下，看看我在说什么。

body {
    
    background-color: black;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    position: relative;
    top: 108px;
    }


header {
    
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    min-width: 100%;
    display: flex;
    height: 90px;
    justify-content:  space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    z-index: ;
    

        }


.logo {
    display: flex;
    text-decoration: none;
    color: white;
    font-family: fantasy;
    font-size: 19px;
    padding: 0;
    margin-left: 15px;
    
    }



header a:hover {
    color: aqua;
                }


nav {
   width: 60%;
   margin: 25px;
    }



nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    
        }




nav li {
}


nav a {
    color: white;
    text-decoration: none;
    font-size: 19px;
    font-family: papyrus;
        }



nav a:hover {
    color: aqua;
            }


.headline {
    display: flex;
    width:30%;
    justify-content: center;
    position: relative;
    top: 454px;
    left: 498px;
    font: 24px cursive;
    z-index: ;
            }

.headline a {
    text-decoration: none;
    color: white;
            }



.headline  a:hover {
    color: aqua;
                    }



main{
    height: 3000px;
    min-width: 100%;
}

footer {
    height: 100px;
    text-align: center;
    font-family: fantasy;
    font-size: 19 px;
    color: white;
}

<!doctype html>
<html>
    <head>
        <title>AquaDrip</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        
    </head>


    

    <body>
        <header>
            <a href="index.html" class="logo"><h1>AquaDrip</h1></a>
                    <nav>
                        <ul>
                            <li><a href="index.html">Applications</a></li>
                            <li><a href="video.html">pricing</a></li>
                            <li><a href="systems.html">Contact Us</a></li>
                            <li><a href="about.html">Careers</a></li>
                        </ul> 
                    </nav>
        </header>
    

        <main>
            <div class="headline">
            <h1><a href="#">Water</a> <a href="#">starts</a> <a href="#">here.</a></h1>
            </div>
            

        </main>
        
        <footer>
            <p>Written by: john doe</p>
            <p>2018.</p>
        </footer>
        
    </body>



</html>

如何让我的页面内容滚动并消失在导航栏后面？

0 个答案: