我想知道如何在滾動頁面后更改導航欄。開始的情況是，一旦用戶到達網站，他就會找到一個導航欄，一旦他滾動頁面，另一個導航欄就會立即出現，就像這個主題中發生的那樣： https://kendall.qodeinteractive.com/manicure/
3 回答
夢里花落0921
TA貢獻1772條經驗 獲得超6個贊
有多種方法可以做到這一點，但最簡單的是使用兩個導航欄。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<style>
*,
*:before,
*:after {
margin: 0;
font-family: sans-serif;
}
section {
width: 100%;
height: 2500px;
}
.header {
box-sizing: border-box;
position: absolute;
top: 0;
width: 100%;
height: 400px;
text-align: center;
background-color: #33f;
color: #fff;
}
.navigation {
box-sizing: border-box;
position: fixed;
width: 100%;
height: 60px;
background-color: #ff4d4d;
color: #fff;
padding: 20px 50px;
transition: all 0.5s ease;
transform: translateY(-100%);
z-index: 9999;
}
.navigation--relative {
position: relative;
top: 0px;
transform: translateY(0%);
}
.navigation.is-fixed {
position: fixed;
width: 100%;
transform: translateY(0%);
}
</style>
</head>
<body>
<section>
<nav class='navigation'>
<div class='navigation__title'><h1>Navbar 1</h1></div>
</nav>
<header class='header header-content'>
<nav class='navigation navigation--relative'>
<div class='navigation__title'><h1>Navbar 2</h1></div>
</nav>
<h1>Content</h1>
</header>
</section>
<script>
function stickyElement(e) {
var header = document.querySelector('.header');
var headerHeight = getComputedStyle(header).height.split('px')[0];
var navbar = document.querySelector('.navigation');
var scrollValue = window.scrollY;
if (scrollValue > headerHeight) {
navbar.classList.add('is-fixed');
} else if (scrollValue < headerHeight) {
navbar.classList.remove('is-fixed');
}
}
window.addEventListener('scroll', stickyElement);
</script>
</body>
</html>
大話西游666
TA貢獻1817條經驗 獲得超14個贊
這是我認為您正在嘗試實現的目標的一個有效示例。除了一些樣式和對 JS 的一些小調整之外，您幾乎已經完成了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<style>
*,
*:before,
*:after {
margin: 0;
font-family: sans-serif;
}
body {
background-color: brown;
top: 0;
min-height: 100vh;
width: 100vw;
}
section {
width: 100%;
height: 2500px;
}
.header {
box-sizing: border-box;
position: absolute;
top: 20px;
width: 80%;
left: 10%;
height: auto;
text-align: center;
background-color: #33f;
color: #fff;
}
.navigation {
box-sizing: border-box;
position: fixed;
width: 100%;
height: 60px;
background-color: #ff4d4d;
color: #fff;
padding: 20px 50px;
transition: all 0.5s ease;
transform: translateY(-100%);
z-index: 9999;
}
.navigation--relative {
position: relative;
top: 0px;
transform: translateY(0%);
}
.content {
position: relative;
top: 100px;
width: 80%;
left: 10%;
height: 100%;
background-color: purple;
}
.navigation.is-scrolled {
position: fixed;
background-color: green;
width: 100%;
transform: translateY(0%);
}
</style>
</head>
<body>
<section>
<nav class='navigation'>
<div class='navigation__title'><h1>Navbar 2</h1></div>
</nav>
<header class='header header-content'>
<nav class='navigation navigation--relative'>
<div class='navigation__title'><h1>Navbar 1</h1></div>
</nav>
</header>
<div class="content">
<h1>Content</h1>
</div>
</section>
<script>
function stickyElement(e) {
var header = document.querySelector('.header');
var headerHeight = getComputedStyle(header).height.split('px')[0];
var navbar = document.querySelector('.navigation');
var scrollValue = window.scrollY;
if (scrollValue > 101) {
navbar.classList.add('is-scrolled');
} else if (scrollValue < 100) {
navbar.classList.remove('is-scrolled');
}
}
window.addEventListener('scroll', stickyElement);
</
script>
</body>
</html>
- 3 回答
- 0 關注
- 158 瀏覽
添加回答
舉報
0/150
提交
取消