I successfully implemented Skrollr to fix images, similar to this example:
Additionally, I am utilizing Slicknav for the menu functionality. However, I encountered an issue where the menu opens behind the fixed "parallax" image.
Despite trying various approaches such as adjusting positioning, margins, and z-index, I have been unable to resolve the problem. My goal is to have the menu open on top of the image.
Here's a snippet of the code: The menu structure resides within the div class="section-1" nested inside 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>The subsequent images are positioned outside 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 styling:
/* Slick-NAV */
.slicknav_btn {
background: none;
}
...
/* Skrollr */
html, body {
height:100%;
}
...
#done {
height:100%;
}
If you have any suggestions or solutions, please share them! Thank you!