Vanilla Javascript: Creating Animated Sticky Navigation Menu

Core points

• Create animated sticky navigation menus without the need for jQuery plug-in. The menu is designed to slide out of view when scrolling down and slide back into view with a translucent effect when scrolling up.
• This process involves setting up the basic HTML structure, applying styles to main elements, and then animateing the menu. The animation is triggered by attaching the event handler to the scroll event and using CSS transformation to adjust the position and appearance of the menu according to the scrolling direction.
• This customization solution provides more design flexibility and allows easy customization to be done according to specific needs. The end result is a dynamic interactive navigation menu that enhances the user experience.

The design of web navigation menus requires considering many factors, such as menu location, style and responsive design. You may also want to add some animation effects (just right, of course). At this point, you may tend to use the jQuery plugin to do most of the work. But it's actually not necessary! It takes only a few lines of code to create your own solution easily.

This article will demonstrate how to create an animated sticky navigation menu using pure JavaScript, CSS, and HTML. The final product will swipe up as you scroll down the page, and slide back into view as you scroll up (with a stylish translucent effect). This technology is used by well-known websites such as Medium and Hacker Noon.

After reading, you will be able to use this technology in your design, hoping to achieve good results. There is a demonstration at the end of the article for urgent readers to refer to.

Sticky Navigation Menu: Basic HTML Structure

The following is the basic HTML code framework we will use. There is nothing exciting here.

<code class="language-html"><div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">

      </div>
      <div class="nav">

      </div>
    </div>
  </div>

  <div class="content">

  </div>
</div></code>

Apply some styles

Let's add some styles to the main elements.

Main container

We need to remove any inherent browser styles and set the width of the container to 100%.

<code class="language-css">*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}</code>

Banner Container

This is a wrapper for the navigation menu. It is always sticky and slides to hide or show the navigation menu as you scroll the page vertically. We give it a z-index value to make sure it appears above the content.

<code class="language-css">.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}</code>

Banner section

This contains the navigation menu. When the page scrolls up or down, the change in position and background color is animated by the CSS transition property.

<code class="language-css">.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}</code>

Content part

This section will contain the background image and text. We will add a parallax effect to this page later in this article.

<code class="language-css">.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}</code>

Menu Animation

First, we need to attach the event handler to the scroll event so that the menu can be displayed and hidden accordingly when the user scrolls. We also put everything in one IIFE to avoid conflicts with other code running on the same page.

<code class="language-html"><div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">

      </div>
      <div class="nav">

      </div>
    </div>
  </div>

  <div class="content">

  </div>
</div></code>

Set some initial values

We will use the refOffset variable to indicate the distance the user scrolls down. When the page loads, it is initialized to 0. We will use the bannerHeight variable to store the height of the menu and also require references to the .banner-wrapper and .banner DOM elements.

<code class="language-css">*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}</code>

Create scrolling direction

Next, we need to determine the scrolling direction so that the menu can be displayed or hidden accordingly.

We will start with a variable called newOffset. When the page loads, this will be set to the value of window.scrollY - the number of pixels the document is currently scrolling vertically (so initially 0). When the user scrolls, newOffset will increase or decrease accordingly. If it is greater than the value stored in bannerHeight, then we know that our menu has been scrolled out of view.

<code class="language-css">.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}</code>

Scrolling down will make newOffset larger than refOffset, and the navigation menu should slide up and disappear. Scrolling up will make newOffset smaller than refOffset, and the navigation menu should slide back into view with a translucent effect. After this comparison, we need to update the refOffset with the value of newOffset to track the distance the user scrolls.

<code class="language-css">.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}</code>

Menu Animation

Finally, let's add some animations to show and hide the menu. We can use the following CSS to achieve this:

<code class="language-css">.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}</code>

We should also make sure that once we reach the top of the page, the translucent effect is removed from the menu.

<code class="language-javascript">(() => {
  'use strict';

  const handler = () => {
    //DOM操作代码在此处
  };

  window.addEventListener('scroll', handler, false);
})();</code>

As you can see, we are removing/applying different CSS classes accordingly.

Demo

This is a demo of the working menu. (The CodePen demo link should be inserted here, since I can't access the external website, the actual link cannot be provided)

Conclusion

This article describes how to write a few lines of code using pure JavaScript (no jQuery required) to design an animated navigation menu. When scrolling down, the menu will slide away; when scrolling up, the menu will slide back to view with a transparent effect. This is done by monitoring the vertical scrolling direction and applying the CSS transformation to the DOM element when needed. This custom solution gives you more freedom to design easily and flexibly according to your needs and specifications.

Want to improve your JavaScript skills? Please check out our courses Getting Started with JavaScript and JavaScript: Next.

This article was peer-reviewed by Vildan Softic. Thanks to all the peer reviewers at SitePoint for getting SitePoint content to its best!

(The FAQ section of the JavaScript animation sticky navigation menu should be included here, and the content is consistent with the input text. Due to space limitations, it is omitted here.)

The above is the detailed content of Vanilla Javascript: Creating Animated Sticky Navigation Menu. For more information, please follow other related articles on the PHP Chinese website!