为什么框阴影只有在滚动后才可见？

Question

多年来我一直在努力弄清楚为什么我的顶部菜单上的框阴影在您第一次导航到每个页面时不可见，但在您开始滚动时出现。

这是站点：http://gourmetsailing.co.nz/DRAFT/charters.html

带阴影的class是.navbar-wrapper

.navbar-wrapper {
background-color: #FFFFFF;
width: 100%;
margin: auto;
-webkit-box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.5); /* [h-offset] [v-offset] [blur radius] [color: red, green, blue, opacity]; */
-moz-box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.5);}

值得一提的是，我也在使用stickUp让菜单粘在页面顶部：http://lirancohen.github.io/stickUp/

可能与该脚本有某种冲突？

Answer 1

尝试将 position: relative 添加到您的 navbar-wrapper class。

情况如下：

当您开始滚动时，position: relative 声明会动态添加到 div 中，其中 class navbar-wrapper 作为内联样式，触发框阴影。

如果直接将此声明添加到 class，框阴影从一开始就存在。

为什么框阴影只有在滚动后才可见？

Why is the box shadow only visible after scrolling?

html

css

jquery

scroll

box-shadow