Проблема в том, чтобы сделать верхнюю панель навигации более гибкой при прокрутке страницы

Question

Я работаю над угловым веб-сайтом, на котором я хочу добавить верхнюю панель навигации точно так же, как верхнюю навигацию https://fp1strategies.com/

, когда мы прокручиваем страницу вниз, ширина панели навигации уменьшается.Я пытался с ng bootstrap, дизайном материала, но у меня не было никакого способа сделать то же самое,

Как я могу сделать верхнюю панель навигации более гибкой, как мы получаем в https://fp1strategies.com/, напрокручивать страницу?

Answer 1

Для этого я использую jQuery для добавления класса после того, как окно прокручивается по высоте 'x'.

JS: после прокрутки 100px добавьте класс 'scrolled', если меньше 100, удалите класс 'прокрутите '

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

, затем управляйте им, используя CSS

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

.menu.scrolled {
 height: 50px;
}

Fiddle