Question

我想知道在滚动页面后如何更改导航栏。

开始时，一旦用户到达网站，他就会找到导航栏，一旦滚动页面，就会立即出现另一个导航栏，如下图所示：https://kendall.qodeinteractive.com/manicure/

Answer 1

有多种方法可以执行此操作，但最简单的方法是使用两个导航栏。

<!DOCTYPE html>
<html lang="en">
<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>

JSFiddle demo

Answer 2

实际上，此主题有2个导航栏，使用Jquery中的ScrollTop捕获事件滚动，然后使用隐藏第一个导航栏并显示2个固定的导航栏。

Answer 3

这是我认为您要实现的目标的有效示例。除了样式和对JS的细微调整外，您几乎就在那儿。

JSFiddle Working Example

<!DOCTYPE html>
<html lang="en">
<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 个答案: