jquery - Why is the box shadow only visible after scrolling?

Question

I've been trying for ages to figure out why the box shadow on my top menu is not visible when you first navigate to each page, but appears once you start scrolling.

This is the site: http://gourmetsailing.co.nz/DRAFT/charters.html

The class with the shadow is .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);}

It's worth mentioning that I am also using stickUp to get the menu to stick to the top of the page: http://lirancohen.github.io/stickUp/

Perhaps some kind of conflict with that script?

Answer 1

尝试添加position: relative到您的navbar-wrapper课程中。

这是正在发生的事情：

当您开始滚动时，position: relative声明将作为内联样式动态添加到divwith 类navbar-wrapper中，触发盒子阴影。

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