scrolling - scroll animation jquery

¿Por qué la sombra de la caja solo es visible después del desplazamiento?

Question

He estado intentando durante siglos averiguar por qué la sombra de la caja en mi menú principal no está visible cuando navegas por primera vez a cada página, pero aparece una vez que empiezas a desplazarte.

Este es el sitio: http://gourmetsailing.co.nz/DRAFT/charters.html

La clase con la sombra es .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);}

Vale la pena mencionar que también estoy usando stickUp para hacer que el menú se adhiera a la parte superior de la página: http://lirancohen.github.io/stickUp/

Tal vez algún tipo de conflicto con ese guion?

Answer 1

Intente agregar position: relative a su clase navbar-wrapper .

Esto es lo que está pasando:

Cuando comienza a desplazarse, la position: relative declaración position: relative se agrega dinámicamente al div con clase navbar-wrapper como un estilo en línea, disparando la sombra del cuadro.

Si agrega esta declaración a la clase directamente, la sombra del cuadro está allí desde el principio.