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

Question

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

当我们向下滚动页面时，导航栏宽度减小。我尝试使用 ng bootstrap material design，但我没有任何方法可以做到这一点，

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

Answer 1

我这样做的方法是在窗口滚动“x”高度后使用 jQuery 添加一个类。

JS:滚动 100px 后添加类 'scrolled'，如果小于 100 则删除类 '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