Панель навигации немного выпирает, даже когда она скрыта ⇐ Html

[Anonymous]

Здесь новый кодер; Я пытаюсь создать панель навигации, которая скрывается при прокрутке вниз и снова появляется при прокрутке вверх. Я следил за этим видеоуроком, и он работает, но когда панель навигации должна быть скрыта, на экране все еще остается немного. Будем признательны за любую помощь.
Проблему можно воссоздать, прокручивая фрагмент кода вверх и вниз:

Код: Выделить всё

// JavaScript Document
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function(e) {
e.preventDefault();
document.querySelector(this.getAttribute("href")).scrollIntoView({
behavior: "smooth"
});
});
});

Код: Выделить всё

@charset "utf-8";

/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
;
}

.noscroll::-webkit-scrollbar {
display: none;
}

.banner {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../Images/home banner.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}

.navbar {
width: 100%;
margin: auto;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
transition: all 300ms ease-in-out;
background-color: red;
}

.logo {
width: 120px;
cursor: pointer;
color: white;
margin-left: 115px;
}

.logo h1 {
text-decoration: underline;
text-decoration-color: #B575B3;
}

.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}

.navbar ul li a {
text-decoration: none;
color: white;
text-transform: uppercase;
}

.navbar ul li::after {
content: '';
height: 3px;
width: 0;
background: #89D7FF;
position: absolute;
left: 0;
bottom: -5px;
transition: 0.3s;
}

.navbar ul li:hover::after {
width: 100%;
}

.scroll-down header {
transform: translate3d(0, -100%, 0);
}

.scroll-up header {
filter: drop-shadow(0 -10px 20px rgb(64, 63, 63));
}

.banner2 {
width: 100vw;
height: 1000vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../Images/1560126.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}

Код: Выделить всё

Untitled Document



Homepage
[*]






Networks
[list]
[url=#Home]Home[/url]
[*][url=#Networks]Networks[/url]
[*][url=#Issues]Issues and Communication[/url]
[*][url=#Useful]Useful Links[/url]
[*]Contact
[/list]






const body = document.body;
let lastScroll = 0;

window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset

if (currentScroll  lastScroll && !body.classList.contains("scroll-down")) {
body.classList.remove("scroll-up")
body.classList.add("scroll-down")
}

if (currentScroll < lastScroll &&  body.classList.contains("scroll-down")) {
body.classList.remove("scroll-down")
body.classList.add("scroll-up")
}
lastScroll = currentScroll;
})

Подробнее здесь: https://stackoverflow.com/questions/739 ... hen-hidden