2015-08-09 72 views
8

我一直在尝试多年,以找出为什么当您第一次导航到每个页面时,顶部菜单上的方框阴影不可见,但一旦开始滚动时就会出现。为什么只有滚动后才能看到阴影框?

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

与阴影的类是.navbar-包装

.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);} 

值得一提的是,我还使用粘贴拿到菜单坚持到顶部页面:http://lirancohen.github.io/stickUp/

也许与该脚本有某种冲突?

+0

可以分享jQuery吗? –

回答

9

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

这里发生的事情:

当你开始滚动时,position: relative声明动态添加到divnavbar-wrapper类作为一个内联样式,发射箱的影子。

如果您直接将此声明添加到类中,那么箱子阴影就是从一开始就存在的。

+2

我刚刚在浏览器中测试了这个,Michael的解决方案似乎解决了这个问题,让我们知道它是否有效@Andrea这是一个有趣的问题。 – gwar9

+2

是的,这个解决方案完美谢谢@Michael_B – Andrea