Curtain js with sticky menu

Question

My goal is to make a simple one page layout web with curtain effect and sticky menu on it. I used the curtain.js lib to achieve the "curtain" effect and this simple tutorial for making the menu sticky.

Here is a JSFiddle I've made: http://jsfiddle.net/ZRdesign/n2a7v/50/

Unfortunately, the navigation bar keeps disappearing while scrolling toward the first cover. Couldn't figure out what's wrong yet.

On scrolling I append the following class to the navigation:

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

Answer 1

Problem solved!

The solution: Simply added two lines to the javascript of adding the .sticky class to navigation (nav). It moves the nav element before the .curtains class in the DOM with jQuery insertBefore() method.

The old code (don't worked):

  // 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');

            }
        };

New working code:

// 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