Занавес js с липким меню

Question

Моя цель - создать простой макет страницы с эффектом занавеса и липким меню на нем. Я использовал curtain.js lib для достижения эффекта «занавеса» и this простой учебник для создания меню липким.

Вот JSFiddle я сделал: http://jsfiddle.net/ZRdesign/n2a7v/50/

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

На прокрутке я добавляю следующий класс к навигации:

.sticky { 
    display:static; 
    position: fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 9999999; 
    border-top: 0;} 

Answer 1

проблема решена!

Решение: Просто добавлено две строки в javascript добавления класса .sticky для навигации (nav). Он перемещает элемент nav до класса .curtains в DOM с помощью метода jQuery insertBefore().

старый код (не работал):

// if we've scrolled more than the navigation, change its position to fixed to stick to top, 
      // otherwise change it back to relative 
      if (scrollTop > stickyNavTop) { 
       $('nav').addClass('sticky'); 

      } else { 
       $('nav').removeClass('sticky'); 

      } 
     }; 

Новый рабочий код:

// if we've scrolled more than the navigation, change its position to fixed to stick to top, 
      // otherwise change it back to relative 
      if (scrollTop > stickyNavTop) { 
       $('nav').addClass('sticky'); 
       $("nav").insertBefore($(".curtains")); //moving the menu before the .curtain class 
      } else { 
       $('nav').removeClass('sticky'); 
       $("nav").insertAfter($("header")); // putting back after the header element 
      } 
     }; 

demo