Проблемы с залипанием путевых точек Jquery

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

На странице

<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;}

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

Проблема 2: Есть ли способ применить липкое к нескольким элементам, а затем заставить их сидеть друг под другом, когда они доберутся до вершины.

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

ПРОДУКТ - содержание О -КОНТЕНТ КОНТАКТЫ -content.

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

т.е. (они должны быть друг под другом рядом) PRODCUT О КОНТАКТЕ

• содержание - -нижний колонтитул-

Надеюсь, это имеет смысл. Jquery не моя сильная сторона.