javascript - 向下滚动时隐藏标题框阴影设置

Question

我正在使用 Rails 框架。

目标是当用户使用特定页面(在我的例子中是搜索页面)并且最大程度地滚动到上侧时，使标题的框阴影消失。

例子: https://media.giphy.com/media/Y0lWILbjEOc5uKqYgD/giphy.gif - 没有阴影，直到用户向下滚动。

CSS

nav.navbar {
  font-family: $font-family-headers;
  font-weight: 700;
  padding-right: 20px;
  background-color: $body-bg;
  box-shadow: 0px 1px 5px 1px rgba(0,0,0,.4);

HTML.SLIM

nav#main-header.navbar.fixed-top.navbar-expand-md[data-user="# 
{current_user ? current_user.name : false}"]
- if t('application.image.use', locale:  :general)

而且看起来我没有任何与 JS 相关的东西。甚至不确定我应该使用什么关键字来搜索解决方案。

Answer 1

在您提供的 gif 上，框阴影始终存在，发生的情况是第二个导航栏折叠并且阴影“向上移动”。

如果您检查该网站的元素，您会看到，当您向下滚动时，它添加了一些类(用于第二个导航栏折叠的过渡)，然后是一个类 navbar-fixed-active 在那里。当您再次向上滚动时，该类消失了。

我猜它使用 JS 滚动事件在 scroll == 0 时关闭该类，如果 scroll != 0 则打开该类。

然后，有或没有阴影只是 CSS 的事情，您可以使元素在某个类存在时具有 box-shadow 属性，而在该类不存在时不具有该属性。