我正在使用 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 相关的东西。 甚至不确定我应该使用什么关键字来搜索解决方案。
最佳答案
在您提供的 gif 上,框阴影始终存在,发生的情况是第二个导航栏折叠并且阴影“向上移动”。
如果您检查该网站的元素,您会看到,当您向下滚动时,它添加了一些类(用于第二个导航栏折叠的过渡),然后是一个类 navbar-fixed-active
在那里。当您再次向上滚动时,该类消失了。
我猜它使用 JS 滚动事件在 scroll == 0 时关闭该类,如果 scroll != 0 则打开该类。
然后,有或没有阴影只是 CSS 的事情,您可以使元素在某个类存在时具有 box-shadow 属性,而在该类不存在时不具有该属性。
关于javascript - 向下滚动时隐藏标题框阴影设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52893321/