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滚动事件在滚动== 0时关闭该类，在滚动！= 0时打开该类。

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

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

1 个答案: