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）。它使用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

窗帘js与粘性菜单

1 个答案: