我想知道如何在滚动页面后更改导航栏。开始的情况是，一旦用户到达网站，他就会找到一个导航栏，一旦他滚动页面，另一个导航栏就会立即出现，就像这个主题中发生的那样： https://kendall.qodeinteractive.com/manicure/
3 回答
梦里花落0921
TA贡献1772条经验 获得超5个赞
有多种方法可以做到这一点，但最简单的是使用两个导航栏。
<!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 关注
- 101 浏览
添加回答
举报
0/150
提交
取消