Question

我正在开发一个动态添加导航栏项目的项目。它工作得很好，但我的问题是我试图在用户向下滚动时隐藏导航栏，并在他向上滚动时出现。我还希望它始终固定在屏幕顶部。一切正常，除非我在滚动功能上添加了隐藏导航栏（我的 JS 代码段中的最后几行）。

（我昨晚刚开始做这个项目，它非常凌乱，根本没有打磨，但是一旦我完成了 JS 文件，我就会处理样式和所有事情）

这是我的代码片段：

// Assigning variables to elemets
const fragment = document.createDocumentFragment();
const menubar = document.querySelector('.menu-icon');
const navbar = document.querySelector('nav');
const navbarList = document.querySelector('ul');
const sections = document.querySelectorAll('section');

// Dropdown menu on click
menubar.addEventListener('click', function() {
  if (navbar.style.visibility === 'hidden') {
    navbar.style.visibility = 'visible';
  } else {
    navbar.style.visibility = 'hidden';
  }
});

// Hide Dropdown menu when scrolling

document.addEventListener('scroll', function() {
  navbar.style.visibility = 'hidden';
});

// Populate navbar
function navbarItems(id, name) {
  const navItem = `<a class="nav-link" href="#${id}"> ${name}</a>`;
  return navItem;
}

function populateNavbar() {
  for (let i = 0; i < sections.length; i++) {
    const newItem = document.createElement('li');
    const sectionName = sections[i].getAttribute('name');
    const sectionId = sections[i].getAttribute('id')
    newItem.innerHTML = navbarItems(sectionId, sectionName);
    navbarList.appendChild(newItem);
  }
  navbarList.appendChild(fragment);
}

populateNavbar();

//

// In viewport detection
function isInViewport(elem) {
  const bounding = elem.getBoundingClientRect();
  return (
    (bounding.top + bounding.bottom) >= 0 &&
    bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)

  );
};

// Active section
const subMenuItems = document.querySelectorAll('li');

function activeSection() {
  for (let i = 0; i < sections.length; i++) {
    if (isInViewport(sections[i])) {
      sections[i].classList.add('active-section');
    } else {
      sections[i].classList.remove('active-section');
    };

    if (sections[i].classList.contains('active-section')) {
      subMenuItems[i].classList.add('active-nav-item');
    } else {
      subMenuItems[i].classList.remove('active-nav-item');
    }
  }
};

// Hide navbar on scroll down
document.addEventListener('scroll', function() {
  activeSection();
  // This is the bad part
  if (window.scrollY > 0) {
    document.querySelector('header').style.top = '-160px';

  } else {
    document.querySelector('header').style.top = '0';
  }
  // ^^
});

/* Mobile-First approach */

header {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 110px;
  background-color: #22292F;
  padding: 10px 0;
  margin: 0;
  transition: top 0.3s;
}

.nav-wrap {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  align-content: center;
}

.logo {
  height: 3em;
  align-self: center;
  margin: 0.8em;
}

.menu-icon {
  font-size: 2em;
  color: #fff;
  line-height: 50px;
  align-self: center;
}

nav {
  position: absolute;
  visibility: hidden;
  background-color: #3D4852;
  top: 8em;
  width: 100%;
  left: 0;
}

.nav-list {
  list-style-type: none;
  padding: 0;
}

.active-nav-item {
  background-color: peru;
}

.nav-link {
  display: inline-block;
  padding: 12px;
  color: #DAE1E7;
  text-decoration: none;
  letter-spacing: 0.05em;
  font-size: 1em;
  text-align: center;
}

.nav-link:hover,
.nav-link:focus {
  color: #eb6f4a;
}

.container {
  padding-top: 130px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!-- navbar section -->
  <header>
    <div class="nav-wrap">
      <img src="https://picsum.photos/200" alt="Logo" class="logo">
      <nav>
        <ul class="nav-list">
        </ul>
      </nav>
      <i class="las la-bars menu-icon"></i>

    </div>
  </header>
  <div class="container">
    <!-- first section -->
    <section id="section1" name="section 1">
      <div class="box">
        <img class="images" src="https://picsum.photos/400" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>

    <!-- second section -->
    <section id="section2" name="section 2">
      <div class="box">
        <img class="images" src="https://picsum.photos/400" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>

    <!-- third section -->
    <section id="section3" name="section 3">
      <div class="box">
        <img class="images" src="https://picsum.photos/400" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>

    <!-- fourth section -->
    <section id="section4" name="section 4">
      <div class="box">
        <img class="images" src="https://picsum.photos/400" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>

    <!-- Fifth section -->
    <section id="section5" name="section 5">
      <div class="box">
        <img class="images" src="https://picsum.photos/400" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>
    <footer>
      <a href="#"><i class="lab la-github"></i></a>
      <a href="#"><i class="lab la-twitter"></i></a>
      <a href="#"><i class="lab la-linkedin-in"></i></a>
    </footer>
  </div>
  <script src="js/app.js"></script>
</body>

</html>

Answer 1

你不必做这些事情，它简单易行。 w3schools官网也给出了同样的内容。代码如下。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
  <p><b>This example demonstrates how to hide a navbar when the user starts to scroll the page.</b></p>
  <p>Scroll down this frame to see the effect!</p>
  <p>Scroll up to show the navbar.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}
</script>

</body>
</html>

在滚动上隐藏导航栏不会使导航栏在向上滚动后固定到位

1 个答案: