0

我已经使用 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%;
                }

有人有想法么？

谢谢！

4

1 回答 1

2

回答了我自己的问题！

给了.slicknav_menu：

    position: relative;
    z-index: 10;

不幸的是，非固定内容也会滑动，但我可以弄清楚！

于 2015-07-23T11:34:24.723 回答