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>
我正在嘗試建立一個壽司網站，但在全螢幕桌面中向下滾動時，我的主要部分圖像不斷振動。當向下捲動導覽列時，我的導覽列也無法在行動版本中工作，導覽列不會像在桌面中那樣折疊得更小。我還遇到了首次訪問網站時無法載入動畫的問題。
我想說，導覽列未折疊的行動版本是因為javascript 事件偵聽器沒有接收到「滾動」事件，可能它在行動裝置上被命名為不同的事件，或者可能它從來沒有達到一定的數量移動設備頂部的空間？為了測試這一點，我建議在「滾動」事件偵聽器中執行 console.log（從頂部開始的空格或其他內容）。至於振動，也許可以嘗試消除過程，只是從你的CSS中刪除隨機的東西，直到它起作用？至於動畫，我不知道。