在页面滚动时使顶部导航栏更灵活时出现问题

Question

我正在开发基于 angular 的网站，我想在其中添加顶部导航栏，就像 https://fp1strategies.com/

的顶部导航一样

当我们向下滚动页面时，导航栏宽度减小。我尝试使用 ng bootstrap material design，但我没有办法做同样的事情，

如何使顶部导航栏更灵活，就像我们进入 https://fp1strategies.com/ 一样，滚动页面？

Answer 1

我这样做的方法是使用 jQuery 在 window 滚动 'x' 高度后添加一个 class。

JS：滚动 100px 后添加 class 'scrolled'，如果小于 100 则删除 class 'scrolled'

$(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