滚动页面后更改导航栏

3回答

梦里花落0921

有多种方法可以做到这一点，但最简单的是使用两个导航栏。<!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>JSFiddle 演示

大话西游666

这是我认为您正在尝试实现的目标的一个有效示例。除了一些样式和对 JS 的一些小调整之外，您几乎已经完成了。JSFiddle 工作示例<!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>

慕姐8265434

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