具有固定img位置的Superslides.js

案例：

我们的网站在页面顶部运行了一个超级滑动插件，在页面结束前被剪掉了大约100像素，所以我们有一个菜单栏。当你向下滚动时，菜单栏会滚动并固定在顶部，这是应该做的。然而，图像也会滚动，这是我们不想要的。我们希望图像固定在背景上，这样看起来一切都在超级滑坡的图像上滚动。

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

问题：

由于它有一个图像标签，我无法在背景图像上覆盖它的位置，这对我来说是合乎逻辑的方法，但由于它是一个滑块和javascript驱动的，我不得不采取不同的方法。

当我试图在滑块上添加一个固定的位置时，无论我抓取哪个div，它都会移动，菜单栏会消失，只有当我开始滚动并到达我告诉它固定在顶部的位置时才会出现，但是滑块保持固定，但内容会向上移动。我还在调用实例的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>

滑块的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');
}