How to create a transparent navbar to solid on scroll in Angular 11

Philip Gyllhamn
3 min readFeb 7, 2021

--

Today im writing a tutorial on how you can create a navbar that has a transparent background and when you scroll further down the site it changes background to a solid color.

Examples:

https://bit.dev/

So im going to show you how to do it in Angular 11. Its pretty easy.

Disclaimer: You should know basic Angular file structure before starting this tutorial. You should also know how to build the navbar component yourself, this tutorial will not show you how to make the whole navbar, only the transforming part. Tip: You should use position: fixed; on the navbar.

So what you first need to do is to to create a couple of CSS variables in the global styles.scss body class.

Add this:

The navbar-scroll is the background for the whole navbar, so we set it to the initial value of transparent.

The navbar-scroll-text is the color of the text.

The navbar-scroll-shadow is the box shadow of the navbar, which is set to none when it is transparent, and will have a slight shadow when not transparent.

Then in the navbar.component.scss (or whatever your component is named) you should add this to your main navbar class:

The “transition: background-color 1s ease” will transform the background color from transparent to solid in a smooth way, otherwise it will switch background very sharply and ugly.

This class is pretty self explanatory, they are using the variable set in the global styles.scss . So now we need to dynamically change the variable in styles.scss from the code.

To do that, all we need is this code(navbar.component.ts):

  1. We need to add an event listener on the scroll event, to capture the scrollY value. Add this in ngOnInit function.
  2. Add the “scroll” function to the code and add it to the event listener. Then you can start adding the code.
  3. Depending on how big the end user screen is, we need to have the transition from transparent to solid at different scrollY values. So we set the scrollHeight variable to a number where we want the transition to happen. And that need to be different depending on the screen size. You can use a fixed static number if you want, but for responsiveness sake, i recommend you to add this.
  4. Then we just check if window.scrollY is bigger or equal to the scrollHeight value, and if it is we start the transition. You can think of the scrollHeight variable as a breakpoint for when to start the transition.
  5. When we want to transition, we only need to set the variables in the styles.scss file to different values. And to do that we use: document.body.style.setProperty(), since we did set the variables in the body class, we use “document.body” and then we just say that we want to use the body style and set our properties inside the body.
  6. Now that we have set the properties if we scroll down, to different values. We need to change it back if we scroll back up. All you need to do is basically reverse what you just did. We need to check if window.scrollY is lesser than the breakpoint value of scrollHeight.

Thats it! A pretty simple solution for a neat and professional looking feature.

If you need help with the whole navbar setup/styling, you can contact me and i will try to help you the best i can. :)

--

--

Philip Gyllhamn
Philip Gyllhamn

Written by Philip Gyllhamn

Junior C# & JavaScript Developer

No responses yet