在页面滚动上使顶部导航栏更灵活时遇到问题

【问题标题】：Getting issue in making top navigation bar more flexible on page scroll在页面滚动上使顶部导航栏更灵活时遇到问题
【发布时间】：2019-05-04 04:41:49
【问题描述】：

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

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

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

【问题讨论】：

标签： css angular angular-material ng-bootstrap ngx-bootstrap

【解决方案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

【讨论】：