Create an Animated Sticky Header on Scroll (With a Little bit of JavaScript)

Previously, we’ve coated many header scroll results, and at the moment it’s time for one more one! On this tutorial, you’ll discover ways to make a header reappear and turn out to be sticky after a specific amount of scrolling.

And to present the top outcome that additional one thing, we’ll use a frosty blur impact for our sticky nav bar.

1. Start With the Web page Markup (HTML)

We’ll work with a typical web page markup: a header and a few sections under it for testing the impact. Contained in the header, we’ll place the emblem and a call-to-action. In your case, you may have many extra components just like the menu, a search bar, a language switcher, and many others. 

Right here’s the markup:

1

<header class="page-header">

2

  <div class="container">

3

    <nav>

4

      <a href="">

5

        <img width="178" peak="38" src="horizontal-logo-mobile.svg" alt="forecastr brand">

6

      </a>

7

      <button sort="button">

8

        GET STARTED

9

        <svg xmlns="https://www.w3.org/2000/svg" width="20" peak="20" viewBox="0 0 24 24">

10

          <path d="M7.411 21.39l-4.054 2.61-.266-1.053c-.187-.744-.086-1.534.282-2.199l2.617-4.729c.387 1.6.848 3.272 1.421 5.371zm13.215-.642l-2.646-4.784c-.391 1.656-.803 3.22-1.369 5.441l4.032 2.595.266-1.053c.186-.743.085-1.533-.283-2.199zm-10.073 3.252h2.895l.552-2h-4l.553 2zm1.447-24c-3.489 2.503-5 5.488-5 9.191 0 3.34 1.146 7.275 2.38 11.809h5.273c1.181-4.668 2.312-8.577 2.347-11.844.04-3.731-1.441-6.639-5-9.156zm.012 2.543c1.379 1.201 2.236 2.491 2.662 3.996-.558.304-1.607.461-2.674.461-1.039 0-2.072-.145-2.641-.433.442-1.512 1.304-2.824 2.653-4.024z" />

11

        </svg>

12

      </button>

13

    </nav>

14

  </div>

15

</header>

16

17

<!-- sections right here -->

2. Set the Header Kinds (CSS)

For the sake of simplicity, we gained’t focus on the preliminary reset and part kinds, however be at liberty to have a look at them by clicking on the CSS tab of the demo venture.

Anyhow, nothing fancy with our header look, as you may see under:

The one necessary factor to notice is that the header shall be completely positioned at first. We’ll additionally give it a background with alpha transparency as that’s wanted for the frosty filter impact we’ll apply later.

The header kinds are as follows:

1

.page-header {

2

  place: absolute;

3

  high: 0;

4

  proper: 0;

5

  left: 0;

6

  padding: 20px 0;

7

  z-index: 1;

8

  background-color: rgba(255, 255, 255, 0.15);

9

}

10

11

.page-header nav {

12

  show: flex;

13

  align-items: middle;

14

  justify-content: space-between;

15

}

16

17

.page-header button {

18

  show: flex;

19

  align-items: middle;

20

  font-size: 16px;

21

  font-weight: daring;

22

  padding: 14px 20px;

23

  border-radius: 10px;

24

  shade: white;

25

  background: #08a6df;

26

  transition: background 0.3s;

27

}

28

29

.page-header button svg {

30

  flex-shrink: 0;

31

  margin-left: 5px;

32

  fill: currentColor;

33

}

34

35

.page-header button:hover {

36

  background: #0ab8f6;

37

}

3. Animate on Scroll (JavaScript)

As we scroll throughout the web page, we’ll hold monitor of how a lot we have now scrolled, and beneath a specific amount of scrolling (150px), we‘ll completely present the header by toggling the is-sticky class.

At that time, the next actions will happen:

• The header place will change from absolute to mounted. On this means, it’ll keep seen as we scroll.
• As we scroll down, the header will easily seem with a slide-in animation. Alternatively, as we scroll up, it’ll instantly disappear after we’re close to the highest of the web page (≤150px).
• We’ll use the backdrop-filter property to blur something behind the header.
• We’ll make the header smaller by lowering its vertical paddings, the emblem dimensions, and the button’s measurement and paddings. 

Right here’s the required JavaScript code:

1

const header = doc.querySelector(".page-header");

2

const toggleClass = "is-sticky";

3

4

window.addEventListener("scroll", () => {

5

  const currentScroll = window.pageYOffset;

6

  if (currentScroll > 150) {

7

    header.classList.add(toggleClass);

8

  } else {

9

    header.classList.take away(toggleClass);

10

  }

11

});

And the related kinds:

1

.page-header.is-sticky {

2

  place: mounted;

3

  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);

4

  padding: 8px 0;

5

  backdrop-filter: blur(10px);

6

  animation: slideDown 0.35s ease-out;

7

}

8

9

.page-header.is-sticky img {

10

  max-width: 80%;

11

}

12

13

.page-header.is-sticky button {

14

  font-size: 14px;

15

  padding: 7px 10px;

16

}

17

18

@keyframes slideDown {

19

  from {

20

    remodel: translateY(-100%);

21

  }

22

  to {

23

    remodel: translateY(0);

24

  }

25

}

Conclusion

Accomplished! Throughout this quick train, we realized learn how to alter a header’s habits on scroll by making it sticky. You may reap the benefits of this impact in circumstances the place you want a lighten/shrunken model of your header on scroll. For instance, you wish to hold some core components like the emblem and menu, but disguise secondary ones just like the search bar or some call-to-action buttons.

Let’s look once more at our creation:

As all the time, thanks so much for studying!