2013-04-02 2 views
1

Im пытается использовать jquery waypoints для создания некоторой липкой навигации, но у меня проблемы.JQuery waypoint stickey issues

На странице

<script src="js/waypoints-sticky.min.js"></script> 
<script src="js/waypoints.js"></script> 
<script src="js/waypoints-sticky.js"></script> 
<script type="text/javascript" charset="utf-8"> 


    $(document).ready(function(){ 
     $(window).resize(function(){ 
      $('#mainsplash').css("height", ($(window).height() - 200) + "px"); 
     }); 
     $('#mainsplash').css("height", ($(window).height() - 200) + "px"); 
     $('.sticky1').waypoint('sticky', { 
      offset: 0 // Apply "stuck" when element 30px from top 
     }); 
    }); 


</script> 

CSS

.stuck{position: fixed; top: 0;} 

Issue1: не похоже на работу на дивы? Если я применяю div с классом «sicky1», он ничего не делает. Однако, когда я применяю класс «stick1» к тегу H1 или A, он работает. Нет ли способа использовать это в div?

Issue2: Есть ли способ применить клейкие элементы для нескольких элементов, а затем заставить их сидеть друг под другом, когда они попадают в верхнюю часть.

В основном то, что я пытаюсь сделать, это создать эффект аккордеона. Так что скажем, моя страница состоит из 3 разделов.

ПРОДУКТ - содержание О -поперечник КОНТАКТ -поперечник.

Когда пользователь прокручивает нижнюю часть, три секции должны быть прикреплены к верхней части страницы друг под другом.

т.е. (они должны находиться под друг с другом в следующем рядом) PRODCUT О CONTACT

  • контента - -footer-

Надежда это имеет смысл. JQuery не мой сильный костюм.

ответ

0

Не думаю, я это понял. Я не был уверен, почему он не работал на дивизиях, но он внезапно начал работать. И, установив margin-top в css на div и смещение в jquery, я смог добиться эффекта аккордеона.