Close Menu
    JavaScript

    How to make a Sticky Navigation Bar using HTML, CSS, And JavaScript

    Coding StellaBy Updated:No Comments5 Mins Read

    Hey there, welcome to today’s quick coding session! We’re going to create a simple and sleek Sticky Navigation Bar using HTML, CSS, and JavaScript. No need for anything complicated – just a straightforward approach to make your website’s navigation stick to the top as users scroll.

    Whether you’re a seasoned coder or just starting out, this tutorial is a great way to add a professional touch to your website. We’ll be using HTML for structure, CSS for style, and a bit of JavaScript for that sticky magic.

    Why a sticky navigation bar, you ask? Well, it’s not just about guiding users; it’s about providing a smooth experience as they explore your site. So, let’s dive in and keep it simple. Ready to make your website’s navigation stand out? Let’s get started on our Sticky Navigation Bar – the easy way!

    HTML :

    The given code is an HTML document that creates a sticky navigation bar. It consists of a header with a navigation menu containing links to different sections of the page. Each section is represented by a <section> element with a unique ID. The navigation links use anchor tags (<a>) with corresponding IDs as href attributes to create smooth scrolling to the respective sections. The code also includes a cursor effect implemented using JavaScript and CSS.

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Sticky Navigation Bar</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<header>
  <nav>
    <ul>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#press">Press</a></li>
      <li><a href="#shop">Shop</a></li>
      <li><a href="#about">Aboutㅤㅤㅤ</a></li>
    </ul>
  </nav>
</header>

<section id="portfolio">
  <h2 data-animate="true">Portfolio</h2>
</section>

<section id="press">
  <h2 data-animate="true">Press</h2>
</section>

<section id="shop">
  <h2 data-animate="true">Shop</h2>
</section>

<section id="about">
  <h2 data-animate="true">About</h2>
</section>

<div id="cursor" class="cursor">
  <div class="ring">
    <div>
      <!--Border-->
    </div>
  </div>
  <div class="ring">
    <div>
      <!--Pointer-->
    </div>
  </div>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>

    CSS :

    The provided CSS code defines styles for a website layout, including the body, header, navigation, sections, and specific elements. It also includes media queries for different screen sizes and various background settings. Additionally, it includes a cursor animation and classes for animation effects.

    html {
  cursor: none;
  --text: #fff;
  background: #001220;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 1.5rem;
}

nav {
  width: 100%;
  background-color: rgba(76, 76, 76, 0.36);
  color: black;
  padding: 10px 0;
  text-align: center;
  display: flex;
  justify-content: space-around;
  border-radius: 5rem;
  backdrop-filter: blur(4px);
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  width: 80%;
  li {
    font-weight: bold;
  }
}

a {
  text-decoration: none;
  color: var(--text);
}

section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

h2 {
  transition: font-size 300ms ease-out;
  font-size: 20vw;
  color: #fff;
  background: -webkit-linear-gradient(45deg, #09009f, #00ff95 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-reflect: below 10px
    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

@media (min-width: 1200px) {
  h2 {
    font-size: 16.5rem;
  }
}

#portfolio {
  // background-color: #390099;
}

#press {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBpZD0idmlzdWFsIiB2aWV3Qm94PSIwIDAgOTAwIDYwMCIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZlcnNpb249IjEuMSI+PHBhdGggZD0iTTAgNDc4TDIxLjUgNDcxLjhDNDMgNDY1LjcgODYgNDUzLjMgMTI4LjggNDQxLjVDMTcxLjcgNDI5LjcgMjE0LjMgNDE4LjMgMjU3LjIgNDIxLjJDMzAwIDQyNCAzNDMgNDQxIDM4NS44IDQ1MS41QzQyOC43IDQ2MiA0NzEuMyA0NjYgNTE0LjIgNDY3LjNDNTU3IDQ2OC43IDYwMCA0NjcuMyA2NDIuOCA0NjUuNUM2ODUuNyA0NjMuNyA3MjguMyA0NjEuMyA3NzEuMiA0NTMuN0M4MTQgNDQ2IDg1NyA0MzMgODc4LjUgNDI2LjVMOTAwIDQyMEw5MDAgNjAxTDg3OC41IDYwMUM4NTcgNjAxIDgxNCA2MDEgNzcxLjIgNjAxQzcyOC4zIDYwMSA2ODUuNyA2MDEgNjQyLjggNjAxQzYwMCA2MDEgNTU3IDYwMSA1MTQuMiA2MDFDNDcxLjMgNjAxIDQyOC43IDYwMSAzODUuOCA2MDFDMzQzIDYwMSAzMDAgNjAxIDI1Ny4yIDYwMUMyMTQuMyA2MDEgMTcxLjcgNjAxIDEyOC44IDYwMUM4NiA2MDEgNDMgNjAxIDIxLjUgNjAxTDAgNjAxWiIgZmlsbD0iI2ZhNzI2OCIvPjxwYXRoIGQ9Ik0wIDUxNEwyMS41IDUxMC4yQzQzIDUwNi4zIDg2IDQ5OC43IDEyOC44IDQ5OUMxNzEuNyA0OTkuMyAyMTQuMyA1MDcuNyAyNTcuMiA1MDNDMzAwIDQ5OC4zIDM0MyA0ODAuNyAzODUuOCA0ODMuMkM0MjguNyA0ODUuNyA0NzEuMyA1MDguMyA1MTQuMiA1MTdDNTU3IDUyNS43IDYwMCA1MjAuMyA2NDIuOCA1MDguMkM2ODUuNyA0OTYgNzI4LjMgNDc3IDc3MS4yIDQ2OC4zQzgxNCA0NTkuNyA4NTcgNDYxLjMgODc4LjUgNDYyLjJMOTAwIDQ2M0w5MDAgNjAxTDg3OC41IDYwMUM4NTcgNjAxIDgxNCA2MDEgNzcxLjIgNjAxQzcyOC4zIDYwMSA2ODUuNyA2MDEgNjQyLjggNjAxQzYwMCA2MDEgNTU3IDYwMSA1MTQuMiA2MDFDNDcxLjMgNjAxIDQyOC43IDYwMSAzODUuOCA2MDFDMzQzIDYwMSAzMDAgNjAxIDI1Ny4yIDYwMUMyMTQuMyA2MDEgMTcxLjcgNjAxIDEyOC44IDYwMUM4NiA2MDEgNDMgNjAxIDIxLjUgNjAxTDAgNjAxWiIgZmlsbD0iI2UzNGM2NyIvPjxwYXRoIGQ9Ik0wIDU2MkwyMS41IDU1Ni43QzQzIDU1MS4zIDg2IDU0MC43IDEyOC44IDUzNC4yQzE3MS43IDUyNy43IDIxNC4zIDUyNS4zIDI1Ny4yIDUyNC4zQzMwMCA1MjMuMyAzNDMgNTIzLjcgMzg1LjggNTMwLjdDNDI4LjcgNTM3LjcgNDcxLjMgNTUxLjMgNTE0LjIgNTU2LjJDNTU3IDU2MSA2MDAgNTU3IDY0Mi44IDU1My4zQzY4NS43IDU0OS43IDcyOC4zIDU0Ni4zIDc3MS4yIDU0OC43QzgxNCA1NTEgODU3IDU1OSA4NzguNSA1NjNMOTAwIDU2N0w5MDAgNjAxTDg3OC41IDYwMUM4NTcgNjAxIDgxNCA2MDEgNzcxLjIgNjAxQzcyOC4zIDYwMSA2ODUuNyA2MDEgNjQyLjggNjAxQzYwMCA2MDEgNTU3IDYwMSA1MTQuMiA2MDFDNDcxLjMgNjAxIDQyOC43IDYwMSAzODUuOCA2MDFDMzQzIDYwMSAzMDAgNjAxIDI1Ny4yIDYwMUMyMTQuMyA2MDEgMTcxLjcgNjAxIDEyOC44IDYwMUM4NiA2MDEgNDMgNjAxIDIxLjUgNjAxTDAgNjAxWiIgZmlsbD0iI2M2MjM2OCIvPjwvc3ZnPg==");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

#shop {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBpZD0idmlzdWFsIiB2aWV3Qm94PSIwIDAgOTAwIDYwMCIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZlcnNpb249IjEuMSI+PHBhdGggZD0iTTAgNDc4TDIxLjUgNDcxLjhDNDMgNDY1LjcgODYgNDUzLjMgMTI4LjggNDQxLjVDMTcxLjcgNDI5LjcgMjE0LjMgNDE4LjMgMjU3LjIgNDIxLjJDMzAwIDQyNCAzNDMgNDQxIDM4NS44IDQ1MS41QzQyOC43IDQ2MiA0NzEuMyA0NjYgNTE0LjIgNDY3LjNDNTU3IDQ2OC43IDYwMCA0NjcuMyA2NDIuOCA0NjUuNUM2ODUuNyA0NjMuNyA3MjguMyA0NjEuMyA3NzEuMiA0NTMuN0M4MTQgNDQ2IDg1NyA0MzMgODc4LjUgNDI2LjVMOTAwIDQyMEw5MDAgNjAxTDg3OC41IDYwMUM4NTcgNjAxIDgxNCA2MDEgNzcxLjIgNjAxQzcyOC4zIDYwMSA2ODUuNyA2MDEgNjQyLjggNjAxQzYwMCA2MDEgNTU3IDYwMSA1MTQuMiA2MDFDNDcxLjMgNjAxIDQyOC43IDYwMSAzODUuOCA2MDFDMzQzIDYwMSAzMDAgNjAxIDI1Ny4yIDYwMUMyMTQuMyA2MDEgMTcxLjcgNjAxIDEyOC44IDYwMUM4NiA2MDEgNDMgNjAxIDIxLjUgNjAxTDAgNjAxWiIgZmlsbD0iI2ZhNzI2OCIvPjxwYXRoIGQ9Ik0wIDUxNEwyMS41IDUxMC4yQzQzIDUwNi4zIDg2IDQ5OC43IDEyOC44IDQ5OUMxNzEuNyA0OTkuMyAyMTQuMyA1MDcuNyAyNTcuMiA1MDNDMzAwIDQ5OC4zIDM0MyA0ODAuNyAzODUuOCA0ODMuMkM0MjguNyA0ODUuNyA0NzEuMyA1MDguMyA1MTQuMiA1MTdDNTU3IDUyNS43IDYwMCA1MjAuMyA2NDIuOCA1MDguMkM2ODUuNyA0OTYgNzI4LjMgNDc3IDc3MS4yIDQ2OC4zQzgxNCA0NTkuNyA4NTcgNDYxLjMgODc4LjUgNDYyLjJMOTAwIDQ2M0w5MDAgNjAxTDg3OC41IDYwMUM4NTcgNjAxIDgxNCA2MDEgNzcxLjIgNjAxQzcyOC4zIDYwMSA2ODUuNyA2MDEgNjQyLjggNjAxQzYwMCA2MDEgNTU3IDYwMSA1MTQuMiA2MDFDNDcxLjMgNjAxIDQyOC43IDYwMSAzODUuOCA2MDFDMzQzIDYwMSAzMDAgNjAxIDI1Ny4yIDYwMUMyMTQuMyA2MDEgMTcxLjcgNjAxIDEyOC44IDYwMUM4NiA2MDEgNDMgNjAxIDIxLjUgNjAxTDAgNjAxWiIgZmlsbD0iI2UzNGM2NyIvPjxwYXRoIGQ9Ik0wIDU2MkwyMS41IDU1Ni43QzQzIDU1MS4zIDg2IDU0MC43IDEyOC44IDUzNC4yQzE3MS43IDUyNy43IDIxNC4zIDUyNS4zIDI1Ny4yIDUyNC4zQzMwMCA1MjMuMyAzNDMgNTIzLjcgMzg1LjggNTMwLjdDNDI4LjcgNTM3LjcgNDcxLjMgNTUxLjMgNTE0LjIgNTU2LjJDNTU3IDU2MSA2MDAgNTU3IDY0Mi44IDU1My4zQzY4NS43IDU0OS43IDcyOC4zIDU0Ni4zIDc3MS4yIDU0OC43QzgxNCA1NTEgODU3IDU1OSA4NzguNSA1NjNMOTAwIDU2N0w5MDAgNjAxTDg3OC41IDYwMUM4NTcgNjAxIDgxNCA2MDEgNzcxLjIgNjAxQzcyOC4zIDYwMSA2ODUuNyA2MDEgNjQyLjggNjAxQzYwMCA2MDEgNTU3IDYwMSA1MTQuMiA2MDFDNDcxLjMgNjAxIDQyOC43IDYwMSAzODUuOCA2MDFDMzQzIDYwMSAzMDAgNjAxIDI1Ny4yIDYwMUMyMTQuMyA2MDEgMTcxLjcgNjAxIDEyOC44IDYwMUM4NiA2MDEgNDMgNjAxIDIxLjUgNjAxTDAgNjAxWiIgZmlsbD0iI2M2MjM2OCIvPjwvc3ZnPg=="),
    #c61266;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background: #c61266;
  h2 {
    background: -webkit-linear-gradient(
      0deg,
      rgba(249, 113, 9, 1) 0%,
      rgba(236, 155, 33, 1) 35%,
      rgba(255, 185, 19, 1) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

#about {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBpZD0idmlzdWFsIiB2aWV3Qm94PSIwIDAgOTAwIDYwMCIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZlcnNpb249IjEuMSI+PHBhdGggZD0iTTAgMTMwTDIxLjUgMTQwLjNDNDMgMTUwLjcgODYgMTcxLjMgMTI4LjggMTc4QzE3MS43IDE4NC43IDIxNC4zIDE3Ny4zIDI1Ny4yIDE2OS43QzMwMCAxNjIgMzQzIDE1NCAzODUuOCAxNDRDNDI4LjcgMTM0IDQ3MS4zIDEyMiA1MTQuMiAxMjlDNTU3IDEzNiA2MDAgMTYyIDY0Mi44IDE2NS43QzY4NS43IDE2OS4zIDcyOC4zIDE1MC43IDc3MS4yIDEzOS43QzgxNCAxMjguNyA4NTcgMTI1LjMgODc4LjUgMTIzLjdMOTAwIDEyMkw5MDAgMEw4NzguNSAwQzg1NyAwIDgxNCAwIDc3MS4yIDBDNzI4LjMgMCA2ODUuNyAwIDY0Mi44IDBDNjAwIDAgNTU3IDAgNTE0LjIgMEM0NzEuMyAwIDQyOC43IDAgMzg1LjggMEMzNDMgMCAzMDAgMCAyNTcuMiAwQzIxNC4zIDAgMTcxLjcgMCAxMjguOCAwQzg2IDAgNDMgMCAyMS41IDBMMCAwWiIgZmlsbD0iI2ZhNzI2OCIvPjxwYXRoIGQ9Ik0wIDkxTDIxLjUgOTUuOEM0MyAxMDAuNyA4NiAxMTAuMyAxMjguOCAxMTVDMTcxLjcgMTE5LjcgMjE0LjMgMTE5LjMgMjU3LjIgMTIyLjVDMzAwIDEyNS43IDM0MyAxMzIuMyAzODUuOCAxMjguOEM0MjguNyAxMjUuMyA0NzEuMyAxMTEuNyA1MTQuMiAxMTEuN0M1NTcgMTExLjcgNjAwIDEyNS4zIDY0Mi44IDEyNS43QzY4NS43IDEyNiA3MjguMyAxMTMgNzcxLjIgMTA2LjNDODE0IDk5LjcgODU3IDk5LjMgODc4LjUgOTkuMkw5MDAgOTlMOTAwIDBMODc4LjUgMEM4NTcgMCA4MTQgMCA3NzEuMiAwQzcyOC4zIDAgNjg1LjcgMCA2NDIuOCAwQzYwMCAwIDU1NyAwIDUxNC4yIDBDNDcxLjMgMCA0MjguNyAwIDM4NS44IDBDMzQzIDAgMzAwIDAgMjU3LjIgMEMyMTQuMyAwIDE3MS43IDAgMTI4LjggMEM4NiAwIDQzIDAgMjEuNSAwTDAgMFoiIGZpbGw9IiNlMzRjNjciLz48cGF0aCBkPSJNMCA3MUwyMS41IDczLjhDNDMgNzYuNyA4NiA4Mi4zIDEyOC44IDgzLjhDMTcxLjcgODUuMyAyMTQuMyA4Mi43IDI1Ny4yIDgwLjJDMzAwIDc3LjcgMzQzIDc1LjMgMzg1LjggNzZDNDI4LjcgNzYuNyA0NzEuMyA4MC4zIDUxNC4yIDc2LjdDNTU3IDczIDYwMCA2MiA2NDIuOCA2MS43QzY4NS43IDYxLjMgNzI4LjMgNzEuNyA3NzEuMiA3Ny4zQzgxNCA4MyA4NTcgODQgODc4LjUgODQuNUw5MDAgODVMOTAwIDBMODc4LjUgMEM4NTcgMCA4MTQgMCA3NzEuMiAwQzcyOC4zIDAgNjg1LjcgMCA2NDIuOCAwQzYwMCAwIDU1NyAwIDUxNC4yIDBDNDcxLjMgMCA0MjguNyAwIDM4NS44IDBDMzQzIDAgMzAwIDAgMjU3LjIgMEMyMTQuMyAwIDE3MS43IDAgMTI4LjggMEM4NiAwIDQzIDAgMjEuNSAwTDAgMFoiIGZpbGw9IiNjNjIzNjgiLz48L3N2Zz4=");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  z-index: 2;
  pointer-events: none;
  div {
    position: absolute;
    display: grid;
    place-items: center;
    div {
      border: 1px solid #fff;
      border-radius: 50%;
      animation: pulse 2.5s linear infinite;
      box-shadow: 0 0 50px 5px #d7abff6e;
    }
  }
  div:nth-child(1),
  div:nth-child(2) {
    width: 100%;
    height: 100%;
  }
  div:nth-child(1) {
    transition: transform 0.2s ease-out;
  }
  div:nth-child(2) {
    div {
      background: #fff;
      border-radius: 50%;
      width: 4px;
      height: 4px;
    }
    transition: transform 0.1s ease-out;
  }
}

*[data-animate="true"] {
  opacity: 0;
}

.animate-slide-down {
  animation: slide-down 300ms ease-out forwards;
}

// ----------
// ANIMATIONS
// ----------

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.25);
    opacity: 0.25;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-150%);
  }
  to {
    opacity: 1;
    transform: translateY(var(--slide-translate-y));
  }
}

    JavaScript:

    The given code snippet is an implementation of the Intersection Observer API in JavaScript. It creates an IntersectionObserverList class that allows you to observe when elements on a web page intersect with a specified root element or viewport. The class provides methods to add, remove, and clear observers for specific elements. The code also includes an example of how to use the IntersectionObserverList class to add an animation to elements when they come into view.

    class IntersectionObserverList {
  mapping;
  observer;
  constructor() {
    this.mapping = new Map();
    this.observer = new IntersectionObserver(
      (entries) => {
        for (var entry of entries) {
          var callback = this.mapping.get(entry.target);

          callback && callback(entry.isIntersecting);
        }
      },
      {
        rootMargin: "300px 0px 300px 0px"
      }
    );
  }
  add(element, callback) {
    this.mapping.set(element, callback);
    this.observer.observe(element);
  }
  ngOnDestroy() {
    this.mapping.clear();
    this.observer.disconnect();
  }
  remove(element) {
    this.mapping.delete(element);
    this.observer.unobserve(element);
  }
}
const observer = new IntersectionObserverList();

$(window).mousemove(function (e) {
  $(".ring").css(
    "transform",
    `translateX(calc(${e.clientX}px - 1.25rem)) translateY(calc(${e.clientY}px - 1.25rem))`
  );
});

$('[data-animate="true"]').each(function (i) {
  console.log("$(this)", $(this));
  var element = $(this)[0];
  observer.add(element, (isIntersecting) => {
    if (isIntersecting) {
      $(this).addClass("animate-slide-down");
    } else {
      $(this).removeClass("animate-slide-down");
    }
  });
});

    Great job! We’ve just built a cool Sticky Navigation Bar using HTML, CSS, and JavaScript. Now, your website’s navigation will stick with users as they scroll. Simple, effective, and ready to elevate your site. Nice work!

    If you face any issues with your project, no worries! Just click the Download button to grab the source code and kickstart your coding adventure. Happy coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply