document.addEventListener('scroll', function() {
const navbar = document.querySelector(".nav-bar");
const navbarHeight = 10;
const distanceFromTop = Math.abs(
document.body.getBoundingClientRect().top
);
if (distanceFromTop >= navbarHeight) navbar.classList.add("nav-bar-fixed");
else navbar.classList.remove("nav-bar-fixed");
});
@import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap');
body {
background-color: rgb(255, 255, 255);
margin: 0px;
box-sizing: border-box;
font-family: 'Tilt Neon', cursive;
}
.nav-bar {
width: 100%;
position: fixed;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
background-color: rgb(255, 255, 255);
border-bottom: black 5px solid;
transition: 2s;
}
.nav-bar-anim {
height: 12vh;
transition: 2s;
}
.nav-bar-fixed {
height: 8vh;
transition: 2s;
}
.logo {
width: 110px;
}
.logo img {
width: 100%;
object-fit: cover;
}
.nav-items {
display: flex;
justify-content: space-between;
gap: 20px;
margin-right: 5%;
}
.nav-items a {
font-size: 5vw;
text-decoration: none;
color: black;
}
/* main-sector */
.main-section {
background-image: url(img/famous-japanese-food-sushi.jpg);
height: 300px;
width: 100%;
padding-top: 80px;
background-size: cover;
backdrop-filter: blur(5px);
position: relative;
}
.main-section .blur {
width: 100%;
height: 100%;
backdrop-filter: blur(2px);
}
.main-section a {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
font-size: 4vw;
padding: 20px;
text-decoration: none;
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
border: 2px solid rgb(0, 0, 0);
}
.main-section .line {
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
height: .5%;
background-color: rgb(150, 29, 29);
animation: expandline 5s forwards;
}
.second-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 40vh;
border-top: 4px solid black;
;
border-bottom: 4px solid black;
gap: 40px;
}
.second-section a {
text-decoration: none;
font-size: 2em;
border: 2px solid black;
padding: 10px 20px;
}
.color-change {
color: black;
transition: 2s;
}
@media (min-width: 800px) {
.nav-bar {
height: 16vh;
}
.nav-bar-fixed {
height: 12vh;
transition: 2s;
}
.logo {
width: 10%;
}
.nav-items {
gap: 30px;
}
.nav-items a {
font-size: 2em;
}
.main-section {
height: 80vh;
width: 100%;
}
}
.nav-items a:hover {
color: red;
transition: 1s;
}
@keyframes expandline {
from {
width: 0%;
}
to {
width: 20%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="home.css">
<title>Sushi</title>
</head>
<body>
<div class="nav-bar" class="nav-bar-anim" class="nav-bar-anim">
<div class="logo">
<img src="img/logo.webp" alt="">
</div>
<div class="nav-items">
<a href="">Contact</a>
<a href="">Order</a>
<a href="">About</a>
</div>
</div>
<div class="main-section">
<div class="blur"></div>
<div class="line" class="first-line"></div>
<a href="tel:747-272-2997">Order Now</a>
<div class="line"></div>
</div>
<div class="second-section">
<h1>Check Out Our Menu</h1>
<a class="color-change" href="">Menu</a>
</div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis inventore aspernatur animi veritatis id eius illo, doloremque enim itaque pariatur, nostrum molestiae dolorum beatae delectus rem perspiciatis, deserunt vitae repellendus assumenda atque
ipsam libero sequi ut consequatur. Laboriosam libero recusandae reiciendis ipsum, harum deleniti itaque doloremque officia praesentium voluptatibus similique dolores? In facilis impedit officia obcaecati ex tempore, quod laboriosam dicta voluptatibus?
Qui quasi eius debitis! Neque minus maiores voluptates, quas architecto laboriosam perspiciatis explicabo vel quis, voluptas ipsam nemo omnis ipsum nesciunt? A incidunt amet cupiditate odio consectetur aperiam ex animi eum corrupti minus dolorum, doloremque
cum perspiciatis ad velit quas veritatis labore nisi qu
</body>
<script src="home.js"></script>
</html>
Ich versuche, eine Sushi-Website zu erstellen, aber mein Hauptbereichsbild vibriert ständig, wenn ich im Vollbild-Desktop nach unten scrolle. Meine Navigationsleiste funktioniert in der mobilen Version auch nicht, wenn ich nach unten scrolle. Die Navigationsleiste wird nicht kleiner, wie es beim Desktop der Fall ist. Ich hatte auch ein Problem damit, dass die Animation nicht geladen wurde, als ich die Website zum ersten Mal besuchte.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我想说，导航栏未折叠的移动版本是因为 javascript 事件侦听器没有接收到“滚动”事件，可能它在移动设备上被命名为不同的事件，或者可能它从来没有达到一定的数量移动设备顶部的空间？为了测试这一点，我建议在“滚动”事件侦听器中执行 console.log（从顶部开始的空格或其他内容）。至于振动，也许可以尝试消除过程，只是从你的CSS中删除随机的东西，直到它起作用？至于动画，我不知道。