<分区>
我几乎像这样使用 Skrollr 修复图像:http://prinzhorn.github.io/skrollr/examples/classic.html
我还在菜单中使用 Slicknav。不幸的是，当菜单打开时，它会在固定的“视差”图像后面打开。
我尝试过更改定位、边距、z-index，等等!没有任何帮助。我希望菜单在图像顶部打开。
编辑:这是一些代码: 这个菜单放置在 div 中，class="section-1"在 skrollr-body 中
<ul id="menu">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Staff</a></li>
<li><a href="https://goo.gl/maps/YPs83">Map</a></li>
<li><a href="#">Contact</a></li>
</ul>```
之后的图像在 skrollr-body 之外:
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#section-1 + .gap"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-100"
style="background-image:url(assets/images/back_sun.jpg)"
data-anchor-target="#section-1 + .gap"
data-bottom-top="transform: translate3d(0px, -80%, 0px);"
data-top-bottom="transform: translate3d(0px, 80%, 0px);"
></div>
CSS:
/*---------------
Slick-NAV
*/---------------
/* Button */
.slicknav_btn {
background: none;
}
/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
background-color: #FFF2E8;
}
.slicknav_menu {
background:#212b41;
padding:0;
}
.slicknav_nav ul, .slicknav_nav li {
border-top:2px solid #9FBDD1;
margin-top:0;
margin-right:0;
margin-bottom:0;
}
.slicknav_nav .slicknav_item:hover {
background:none;
color: #FFF2E8;
}
.slicknav_nav a {
color: #FFF2E8;
}
.slicknav_nav a:hover{
background:none;
color:#FFF2E8;
}
.slicknav_nav .slicknav_txtnode {
padding: 7px 15px;
margin: 0;
}
a.slicknav_btn.slicknav_collapsed, a.slicknav_btn.slicknav_open {
background-color: transparent;
}
.slicknav_menu .slicknav_menutxt, .slicknav_brand a, .slicknav_brand {
color: #FFF2E8;
font-family: 'Codystar', cursive;
font-weight: normal;
text-shadow: 0 0px 0px #000;
}
/*---------------
Skrollr
*/---------------
html, body {
height:100%;
}
.skrollr-desktop body {
height:100% !important;
}
body {
font-family:sans-serif;
}
p {
margin:0 0;
}
.parallax-image-wrapper {
position:fixed;
left:0;
width:100%;
overflow:hidden;
}
.parallax-image-wrapper-50 {
height:50%;
top:-50%;
}
.parallax-image-wrapper-100 {
height:100%;
top:-100%;
}
.parallax-image {
display:none;
position:absolute;
bottom:0;
left:0;
width:100%;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
.parallax-image-50 {
height:200%;
top:-50%;
}
.parallax-image-100 {
height:100%;
top:0;
}
.parallax-image.skrollable-between {
display:block;
}
.no-skrollr .parallax-image-wrapper {
display:none !important;
}
#skrollr-body {
height:100%;
overflow:visible;
position:relative;
}
.gap {
background:transparent center no-repeat;
background-size:cover;
}
.skrollr .gap {
background:transparent !important;
}
.gap-50 {
height:50%;
}
.gap-75 {
height:75%;
}
.gap-100 {
height:100%;
}
.header, .content {
background:#eee;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.content-full {
height:100%;
}
#done {
height:100%;
}
有人有什么想法吗？
谢谢!