javascript - 具有固定 img 位置的 Superslides.js

Question

案例:

我们的网站有一个在页面顶部运行的 super 幻灯片插件，它在页面末尾之前被切断了大约 100 像素，因此我们有一个菜单栏。当您向下滚动时，菜单栏会滚动并固定在顶部，这是它应该做的。但是，图像也会滚动，这是我们不希望的。我们希望图像固定在背景上，这样看起来一切都在滚动超幻灯片的图像。

我们测试领域的工作如下所示:http://test.thewebfanatics.com/jellyweb/

问题:

因为它有一个图像标签，我不能在背景图像上覆盖它的位置，这对我来说是合乎逻辑的方法，但因为它是一个 slider 和 javascript 驱动的，我不得不采用不同的方法。

当我试图添加一个固定到 slider 的位置时，无论我抓取什么 div，它都会发生变化，菜单栏消失并且只在我开始滚动并结束在我告诉它固定的位置时出现在顶部， slider 保持固定，但内容向上移动。我还尝试在调用实例的 js 中将可滚动变量设置为 false，但都没有运气。我认为这是绝对和相对位置的问题，但我似乎无法弄清楚。

代码

代码本身很长，但我会尽量给你相关的代码

<div class="topwrap">

<div class= "resolutionwrap hidden-phone" id="slider">
    <div id="slides">
        <ul class="slides-container" id="home">
            <li>
                <img src="img/slides/picture4.jpg"/>
                <div class="containercaption">
                    <div class="row">
                        <div class="hidden-xs hidden-sm col-md-8 col-lg-8 col-md-offset-2 col-lg-offset-2">
                            <h3 class="captiontitle">
                                <?php
                                    switch ($_SESSION['language']) {
                                        case "nl":
                                            echo "The Web Fanatics Slaan een brug tussen jou en je doelgroep";
                                            break;
                                        case "en":
                                            echo "The Web Fanatics create a bridge between you and your targetgroup";
                                            break;
                                        case "pl":
                                            echo "Poolse vertaling";
                                            break;  
                                    }
                                ?>
                            </h3>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a href="http://test.jellyfishwebdesign.nl/jellyweb/diensten/webdesign"><img src="img/slides/responsive-slide.jpg" width="1680" height="auto" alt=""/></a>
                <div class="containercaption">
                    <div class="row">
                        <div class="hidden-xs hidden-sm col-md-8 col-lg-8 col-md-offset-2 col-lg-offset-2">
                            <h3 class="captiontitle">Mobile Friendly & Responsive Design</h3>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
<!-- end slider -->

    <nav>
        (whole bunch of nav code)    
    </nav>
</div>

</div>  

<section class="content">
     (filled with content)
</section>

slider 的 CSS

#slides {
    position: relative;
}
#slides .slides-container {
    display: none;
}
#slides .scrollable {
    *zoom: 1;
    position: relative;
    top: 0;
    left: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}
#slides .scrollable:after {
    content: "";
    display: table;
    clear: both;
}

.slides-navigation {
    margin: 0 auto;
    position: absolute;
    z-index: 3;
    top: 46%;
    width: 100%;
}
.slides-navigation a {
    position: absolute;
    display: block;
}
.slides-navigation a.prev {
    left: 0;
}
.slides-navigation a.next {
    right: 0;
}

.slides-pagination {
    position: absolute;
    z-index: 3;
    bottom: 0;
    text-align: center;
    width: 100%;
}
.slides-pagination a {
    border: 2px solid #222;
    border-radius: 15px;
    width: 10px;
    height: 10px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=");
    margin: 2px;
    overflow: hidden;
    text-indent: -100%;
}
.slides-pagination a.current {
    background: #222;
}



.resolutionwrap {
    min-height: 100%;
    padding: 0;
    background: #fff;
    z-index: 0;
}

最后是 javascript

$(window).scroll(function () {
    if ($('.resolutionwrap').length == 1) {
        var documentScrollTop = $(document).scrollTop() + 100;
        var fixedToggle = $('#slides').height();

        if (documentScrollTop > fixedToggle) {
            $('#hoofdmenu').addClass('fixed');
            $('#hoofdmenu').css("margin-top", "0px");
        } else {
            $('#hoofdmenu').removeClass('fixed');
            $('#hoofdmenu').css("margin-top", "-100px");
        }
    }
});

function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}  
var p = getUrlParameter('p');

var str = window.location.pathname;
var page = str.split("/");
x=page[2];
var l = x=page[2]; 

if (p === 'home' || p === undefined){ 
    if (l === 'home' || l === 'undefined' || l === ''){ 
        $('#slides').superslides({
            play: 5000,
            scrollable: false
        });
    } else {
         $('#hoofdmenu').addClass('fixed');
         $('.resolutionwrap').addClass('banner-place');
    }   
} else {
     $('#hoofdmenu').addClass('fixed');
     $('.resolutionwrap').addClass('banner-place');
}

Answer 1

添加位置:固定!重要；到#slides，然后添加 z-index: 1;也到#slides。之后你可以添加 z-index: 2;到必须在 slider 上方可见的元素。