Question

我正在基于角度的网站上工作，我想在其中添加顶部导航栏，就像https://fp1strategies.com/的顶部导航

当我们向下滚动页面时，导航栏的宽度会减小。我尝试使用ng bootstrap进行材质设计，但没有任何办法做同样的事情，

在滚动页面时，如何像在https://fp1strategies.com/中一样使顶部导航栏更加灵活？

Answer 1

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

JS：滚动100像素后，添加“滚动”类，如果少于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

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

1 个答案: