css 当我向下滚动页面时，如何为我的导航栏创建一个平滑的滚动动画？

mrfwxfqh 于 2023-02-20 发布在其他

关注(0)|答案(1)|浏览(143)

我的网站上有一个导航栏，它应该在用户向下滚动页面时平滑地折叠和缩小。然而，不是平滑的过渡，导航栏只是消失了，取而代之的是一个更小的版本。页面上的其他元素也出现了同样的问题，比如下拉菜单。
下面是常规版本的css：

.opportunities-tab-customization-container[_ngcontent-gpm-c2] {
    align-items: center;
    background-color: white;
    display: flex;
    height: auto;
    margin-bottom: 10px;
    width: 100%;
}

下面是折叠版本的css：

.collapsed-opportunities-tab-customization-container[_ngcontent-gpm-c2] {
    align-items: center;
    background-color: white;
    display: flex;
    margin-bottom: 10px;
}

下面是动画和过渡效果的css：

.translate-y[_ngcontent-gpm-c2] {
    -webkit-animation: translate-y 0.5s ease-out alternate;
    -moz-animation: translate-y 0.5s ease-out alternate;
    animation: translate-y 0.5s ease-out alternate;
}

我试过调整导航栏的CSS和动画的定时和缓动，但是我一直无法实现平滑的过渡，我期望导航栏平滑地折叠，下拉菜单在用户向下滚动页面时平滑地过渡。

.translate-y[_ngcontent-gpm-c2] {
    -webkit-animation: translate-y 0.5s ease-out alternate;
    -moz-animation: translate-y 0.5s ease-out alternate;
    animation: translate-y 1.5s ease-out alternate;
    height: 150px;
}

然而，实际上发生的是元素简单地消失和重新出现，没有任何平滑的动画。当我从顶部向下滚动时，“翻译文本”标题和水獭图像变得有点小，它下面的文本淡出。右侧的下拉菜单也是如此--这个想法是为了使翻译平滑，而不是“一个导航栏被另一个导航栏取代”。
有谁能提出一个解决这个问题的方法吗？我将非常感谢任何帮助或指导来解决这个问题。谢谢。

css

来源：https://stackoverflow.com/questions/75455964/how-can-i-create-a-smooth-scrolling-animation-for-my-navbar-when-scrolling-down

1条答案

按热度按时间

cnjp1d6j1#

使用rxjs操作符很容易隐藏导航（我想你的nv有一个固定的60px的高度）
在网络上有很多例子，但是我们将使用rxkjs操作符fromEvent和pipeasync来订阅，以"Angular 的方式"来做
想象一个HTML像

<nav [style.top]="scrollObs$|async">..your nav...</nav>
<div class="content">
     ..your content...
</div>

无菌css

nav {
  background-color: #0074d9;
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  transition: top 0.3s;
}
.content {
  margin-top: 60px;
}

我们只需要定义scrollObs $

scrollObs$ = fromEvent(document, 'scroll').pipe(
    map((_) => {
      if (document.body.scrollTop > 20 ||
        document.documentElement.scrollTop > 20)
         return '-60px';

      return '0';
    }),
    distinctUntilChanged()
);

如果你不想藏得更小，看起来更近

nav {
  ...
  transition: height 0.3s; //<--see the height
}

<!--now we change the "style.height"-->
<nav [style.height]="scrollObs$|async">Hello nav</nav>

//Now we return 30px or 60px
scrollObs$ = fromEvent(document, 'scroll').pipe(
  map((_) => {
    if (document.body.scrollTop > 20 ||
      document.documentElement.scrollTop > 20)
         return '30px'; //<--we change the height to 30px
    return '60px';   //the height normal
  }),
  distinctUntilChanged()
);

参见stackblitz

- 更新**使用[www.example.com]有点"硬编码"，所以..为什么不使用类呢style.property], so.. why not use class

<!--now we change the "style.height"-->
<nav [class.collapsed]="scrollObs$|async">..your nav..</nav>

//Now we return 30px or 60px
scrollObs$ = fromEvent(document, 'scroll').pipe(
  map((_) => {
    if (document.body.scrollTop > 20 ||
      document.documentElement.scrollTop > 20)
         return true;
    return null
  }),
  distinctUntilChanged()
);

现在，它只定义类折叠

nav.collapsed{
   height:30px;
}

赞(0）回复(0）举报 2023-02-20

我来回答

css 当我向下滚动页面时，如何为我的导航栏创建一个平滑的滚动动画？

1条答案

相关问题

热门标签

最新问答