Html - How to make navbar appear after scrolling 1 section?

MeetNakum
July 9, 2023
180 views
2 votes
3 Answers

I’m looking for help with making the navigation bar appear after scrolling past the first section (100vh).
The navbar should stay sticky for the following sections.
Additionally, I need assistance in ensuring its responsiveness.
Your response to my query is greatly appreciated.

Answers

Certainly! I can help you with making a navigation bar appear after scrolling past the first section and ensuring its responsiveness. Here’s an example implementation using HTML, CSS, and JavaScript:
HTML :

<body>
  <header>
    <nav class="navbar">
      <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
      </ul>
    </nav>
  </header>

  <section id="section1">
    <!-- Content for Section 1 -->
  </section>

  <section id="section2">
    <!-- Content for Section 2 -->
  </section>

  <section id="section3">
    <!-- Content for Section 3 -->
  </section>
</body>

CSS :

body {
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f8f8f8;
  z-index: 100;
}

.navbar {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar li {
  margin: 0 10px;
}

.navbar a {
  text-decoration: none;
  color: #333;
}

section {
  height: 100vh;
  padding: 50px;
}

JS :

window.addEventListener('scroll', function() {
  var header = document.querySelector('header');
  var section1 = document.getElementById('section1');
  var section1Height = section1.offsetHeight;
  
  if (window.pageYOffset > section1Height) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
});

8-10 lines of javascript will do that for you

Lets make the structure first

<!DOCTYPE html>
<html>
  <head>
    <title>StackOverflow #76646064</title>
  </head>
  <body>
    <div id="top"></div>
    <nav id="navbar">
      <ul>
        <li><a href="#top">Home</a></li>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
      </ul>
    </nav>
    
    <section id="section1">
      <h2>Section 1</h2>
      <p>This is the first section of the page.</p>
    </section>

    <section id="section2">
      <h2>Section 2</h2>
      <p>This is the second section of the page.</p>
    </section>

    <section id="section3">
      <h2>Section 3</h2>
      <p>This is the third section of the page.</p>
    </section>
  </body>
</html>

Here <div id="top"></div> will help us to reach page top

some CSS that will make the nav behave like you wanted. Appear and hide.

#navbar {
    position: relative;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
}

#navbar.visible {
    position: fixed;
    top: 0;
}

some javascript that will add the visible class to the nav conditionally

window.addEventListener('scroll', function () {
    var navbar = document.getElementById('navbar');
    var section1 = document.getElementById('section1');
    var section1Height = section1.offsetHeight;

    if (window.pageYOffset >= section1Height) {
        navbar.classList.add('visible');
    } else {
        navbar.classList.remove('visible');
    }
 });

You can run the code bellow ↙

window.addEventListener('scroll', function() {
  var navbar = document.getElementById('navbar');
  var section1 = document.getElementById('section1');
  var section1Height = section1.offsetHeight;

  if (window.pageYOffset >= section1Height) {
    navbar.classList.add('visible');
  } else {
    navbar.classList.remove('visible');
  }
});

body {
  margin: 0;
  padding: 0;
}

#navbar {
  position: relative;
  display: block;
  width: 100%;
  background-color: #fff;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#navbar.visible {
  position: fixed;
  top: 0;
}

#navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

#navbar li {
  margin: 0 10px;
}

#navbar a {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

#navbar a:hover {
  background-color: #eee;
}

section {
  height: 100vh;
  padding: 20px;
  padding-top: 80px;
}

#section1 {
  padding-top: 0px;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>StackOverflow #76646064</title>
</head>

<body>
  <div id="top"></div>

  <nav id="navbar">
    <ul>
      <li><a href="#top">Home</a></li>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
    </ul>
  </nav>

  <section id="section1">
    <h2>Section 1</h2>
    <p>This is the first section of the page.</p>
  </section>

  <section id="section2">
    <h2>Section 2</h2>
    <p>This is the second section of the page.</p>
  </section>

  <section id="section3">
    <h2>Section 3</h2>
    <p>This is the third section of the page.</p>
  </section>
</body>

</html>

Just a little bit of JS to ensure the nav shows up after scrolling and you have a nav bar that works perfectly

window.addEventListener('scroll', function() {
  let header = document.querySelector('header');
  let distanceY = window.pageYOffset || document.documentElement.scrollTop;

  if (distanceY > 100) {
    header.style.top = '0';
  } else {
    header.style.top = '-100vh';
  }
});

body {
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  top: -100vh;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  transition: top 0.3s ease-in-out;
  z-index: 999;
}

main {
  height: 300vh;
  text-align: center;
}

nav {
  display: flex;
  justify-content: center;
  padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <header>
    <nav>
      <p> this is the nav bar</p>
    </nav>
  </header>
  
  <main>
    <h3> this is the page's content</h3>
  </main>
  
  <script src="script.js"></script>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to make navbar appear after scrolling 1 section?

Answers