master

分支 (1)

管理

管理

master

one-case-per-day
/
21-sticky-navbar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sticky-navbar</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #fff;
        }

        a:hover,a:active {
            color: #c0392b !important;
        }

        h1{
            margin: 15px 0;
        }

        body {
            width: 100vw;
            background-color: #fff;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .nav {
            position: fixed;
            left: 0;
            top: 0;
            height: 80px;
            background-color:#222 ;
            z-index: 1;
            transition: all 0.5s ease-in-out;
        }

        .active {
            height: 60px;
            background-color: #ccc;
        }

        .active a {
            color: #000;
        }

        .container {
            width: 100vw;
            height: 100%;
            padding: 0 150px;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        ul {
            width: 400px;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .hero {
            position: relative;
            width: 100vw;
            height: 100vh;
            background-image: url(https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
            background-position:bottom center;
            background-size: cover;
            background-repeat: no-repeat;
            z-index: -2;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero::after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color:rgba(0,0,0,.5);
            z-index: -1;
        }

        .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .content {
            width: 100%;
            padding: 0 150px;
            color: #000;
        }

        .content-item {
            margin: 30px 0;
        }

        .content-item p{
            line-height: 30px;
            letter-spacing: 1.2px;
        }


    </style>
</head>
<body>
    <nav class="nav">
        <div class="container">
            <h1 class="logo">
                <a href="#">My Website</a>
            </h1>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>


    </nav>

    <div class="hero">
        <div class="container info">
            <h1>Welcome To My Website</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</p>
        </div>
    </div>

    <div class="content">
        <div class="content-item">
            <h1>Content One</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a dolorum voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum labore, placeat officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi facere, iure rerum sequi? Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!</p>
        </div>
        <div class="content-item">
            <h1>Content Two</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a dolorum voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum labore, placeat officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi facere, iure rerum sequi? Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!</p>
        </div>
    </div>

    <script>
        const nav = document.querySelector('.nav')

        document.addEventListener('scroll',()=>{
            const scrollTop = document.documentElement.scrollTop
            const vh = window.innerHeight //视口高度
            if(scrollTop > vh/2){
                nav.classList.add('active')
            }else{
                nav.classList.remove('active')
            }
        })
    </script>


</body>
</html>