Я пытаюсь создать липкую панель навигации, которая анимируется (становится меньше) при прокрутке. Я следил за видео на YouTube о его создании, но мне кажется, что он не работает каждый раз, когда я пытаюсь ввести javascript.
$(window).on('scroll', function() {
if (window).scrollTop(); {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', Helvetica, sans-serif;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: 0.6s;
}
nav.black {
background: rgba (0, 0, 0, 8);
}
nav .logo {
float: left;
}
nav .logo img {
height: 80px;
transition: 0.6s;
}
nav .logo a {
position: fixed;
padding-top: 25px;
font-family: 'Montserrat', Helvetica, sans-serif;
font-weight: 600;
color: #fff;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.6s;
}
nav ul {
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
list-style: none;
font-weight: 550;
}
nav ul li a {
line-height: 80px;
color: #fff;
padding: 5px 20px;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: 0.6s;
}
nav ul li a:hover {
color: #000;
background: #fff;
}
section.sec1 {
width: 100%;
height: 100vh;
background: url(./traffic.jpg);
background-size: cover;
}
section.sec2 {
width: 100%;
height: 100vh;
background: url(./traffic.jpg);
background-size: cover;
}
section.content {
padding: 100px;
}
section.content h1 {
margin: 0;
padding: 0;
font-size: 2em;
}
section.content p {
margin: 20px 0 0;
padding: 0;
font-size: 1.1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Website</title>
<link rel="stylesheet" href="maint.css">
</head>
<body>
<nav>
<div class="logo">
<img src="trafficlight.png" style="width: 80px;">
<a href="#">WebSite Name</a>
</div>
<ul>
<li><a href="about.html">First</a></li>
<li><a href="packages.html">Packages</a></li>
<li><a href="classes.html">Classses</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</nav>
<section class="sec1"></section>
<section class="content">
<h1>LoremIpsumLorem<br></h1>
<p>LoremIpsumLoremIpsumLoremIpsum <b>LoremIpsum</b></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>
</section>
</body>
</html>