我是 javascript 的新手，所以我想知道是否有人可以提供帮助？
我正在尝试制作一个类似于本网站上的网站标题 - https://therangeestate.com.au/。仅当您向下滚动时它才会淡出。
有人可以告诉我该怎么做吗？
谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Header Example</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.content{
height: 700vh;
}
header {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px 20px;
transition: top 0.3s;
}
.hide {
top: -100px; /* Move the header off-screen */
}
</style>
</head>
<body>
<header id="header" class="hide">
<h1>Scroll Down to See Me</h1>
</header>
<div class="content">
<!-- Your content here -->
</div>
<script>
const header = document.getElementById("header");
window.addEventListener("scroll", function() {
if (window.scrollY > 0) {
header.classList.remove("hide");
} else {
header.classList.add("hide");
}
});
</script>
</body>
</html>您可以在其中添加样式 这是当您在网站上滚动时显示标题的基本示例