Sticky Navbar (ex2)

JavaScript HTML CSS
Web develop
Publish Date:   2022-06-05
Update Date:   2023-03-28
Word Count:   718
Read Times:   4 Min
Read Count:  

Sticky Navbar

1. Video

https://drive.google.com/file/d/1udxQCogiUYxmwONM1GPULOXHVp1ZxJbo/view?usp=sharing

2

2. HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Sticky Navigation</title>
</head>

<body>
    <nav class="nav">
        <div class="container">
            <h1 class="logo"><a href="https://liangjunyi-010.github.io/liangjunyi.github.io/">My Website</a></h1>
            <ul>
                <li><a href="#" class="current">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">
            <h1>Welcome To My Website</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</p>
        </div>
    </div>

    <section class="container content">
        <h2>Content One</h2>
        <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>

        <h3>Content Two</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrum possimus inventore nisi
            laboriosam consequatur modi nulla eos, commodi, omnis distinctio! Maxime distinctio impedit provident,
            voluptates illo odio nostrum minima beatae similique a sint sapiente voluptatum atque optio illum est!
            Tenetur tempora doloremque quae iste aperiam hic cumque repellat?</p>
    </section>

    <script src="script.js"></script>
</body>

</html>

3. CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #222;
    padding-bottom: 50px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.nav {
    position: fixed;
    background-color: #222;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.3s ease-in-out;
}

.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    transition: all 0.3s ease-in-out;
}

.nav ul {
    display: flex;
    list-style-type: none;
    align-items: center;
    justify-content: center;
}

.nav a {
    color: #fff;
    text-decoration: none;
    padding: 7px 15px;
    transition: all 0.3s ease-in-out;
}

.nav.active {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav.active a {
    color: #000;
}

.nav.active .container {
    padding: 10px 0;
}

.nav a.current,
.nav a:hover {
    color: #c0392b;
    font-weight: bold;
}

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

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

.hero h1 {
    font-size: 46px;
    margin: -20px 0 20px;
}

.hero p {
    font-size: 20px;
    letter-spacing: 1px;
}

.content h2,
.content h3 {
    font-size: 150%;
    margin: 20px 0;
}

.content p {
    color: #555;
    line-height: 30px;
    letter-spacing: 1.2px;
}

4. JavaScript

1
2
3
4
5
6
7
8
9
10
const nav = document.querySelector('.nav')
window.addEventListener('scroll', fixNav)

function fixNav() {
    if (window.scrollY > nav.offsetHeight + 150) {
        nav.classList.add('active')
    } else {
        nav.classList.remove('active')
    }
}

5.src

image-20220605193739219

Author: Liang Junyi
Link: https://liangjunyi010.github.io/liangjunyi.github.io/2022/06/05/web-learning-sticky-navbar/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source Liang Junyi !
JavaScript HTML CSS
  TOC