Getting issue in making top navigation bar more flexible on page scroll

Question

I am working on angular based website in which I want to add top navigation bar just like top navigation of https://fp1strategies.com/

when we scroll down page , navigation bar width reduce . I tried with ng bootstrap , material design , but I didn't get any way to do the same ,

How I can make top navigation bar more flexible just like we get in https://fp1strategies.com/ , on scrolling the page ?

Answer 1

They way I do this is to use jQuery to add a class after the window is scrolled 'x' height.

JS: after scrolling 100px add class 'scrolled', if less then 100 remove class 'scrolled'

$(window).scroll(function() {
 if ($(window).scrollTop() > 100) {
  $('.menu').addClass('scrolled')
 } else {
  $('.menu').removeClass('scrolled')
 }
});

then control it using CSS

.menu {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100px;
 background-color: red;
 transition: height 500ms;  
}

.menu.scrolled {
 height: 50px;
}

Fiddle