我多年来一直在努力弄清楚为什么当你第一次导航到每个页面时,顶部菜单上的方框阴影不可见,但是一旦你开始滚动就会出现。
这是网站:http://gourmetsailing.co.nz/DRAFT/charters.html
带阴影的类是.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/
也许与该脚本存在某种冲突?
答案 0 :(得分:9)
尝试将position: relative
添加到navbar-wrapper
班级。
以下是发生的事情:
当您开始滚动时,position: relative
声明会动态地添加到div
,其中navbar-wrapper
类为内联样式,会触发方框阴影。
如果直接将此声明添加到类中,则从一开始就存在框阴影。