时间戳

首页 > 解决方案 > 向下滚动时隐藏标题框阴影设置

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

问题描述

我正在使用 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 相关的东西。甚至不确定我应该使用什么关键字来搜索解决方案。

标签： javascriptcssbox-shadow

解决方案

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

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

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

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

推荐阅读