Superslides.js с позиции фиксированной IMG

Question

Корпус:

Наш сайт имеет Superslides плагин работает в верхней части страницы, которая была отрезана около 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'); 
} 

Answer 1

Добавить позицию: fixed! Important; на #slides, затем добавьте z-index: 1; to #slides тоже. После этого вы можете добавить z-index: 2; к элементам, которые должны быть видны над ползунком.