带有粘性菜单的窗帘 js答案

【问题标题】：Curtain js with sticky menu带有粘性菜单的窗帘 js
【发布时间】：2014-02-02 20:31:05
【问题描述】：

我的目标是制作一个简单的单页布局网页，上面有窗帘效果和粘性菜单。我使用了窗帘.js 库来实现“窗帘”效果，并使用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;}

【问题讨论】：

标签： jquery css menu sticky

【解决方案1】：

问题解决了！

解决办法：只需在将 .sticky 类添加到导航 (nav) 的 javascript 中添加两行。它使用 jQuery insertBefore() 方法将 nav 元素移动到 DOM 中的 .curtains 类之前。

旧代码（不起作用）：

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

【讨论】：