个人中心
gpt4 book ai didi

javascript - Skrollr 与 SlickNav，重叠问题

转载 作者：行者123 更新时间：2023-11-30 16:43:30 24 4
gpt4 key购买 nike

<分区>

我几乎像这样使用 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%;
                }

有人有什么想法吗？

谢谢!

24 4 0
文章推荐： javascript - 将声明的空变量更新为 bool 值
文章推荐： javascript - 外部 dom 元素上的 D3.js 事件处理程序触发 svg 树节点的重绘
文章推荐： javascript - 如何在 Angularjs 指令中拥有动态 ng-model
文章推荐： javascript - 如何从 Asp.net web 应用程序(互联网应用程序)获取客户端计算机名称
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com