javascript - 如何在粘性菜单上只显示主菜单

Question

我一直在研究如何制作粘性菜单并查看了很多教程。我也在这里检查了一些相关问题，但似乎有查看答案，但它仍然对我不起作用。我想在没有插件的情况下做一个。这可能吗？

这是我在其中一个教程中找到的代码。我遵循了教程，但它似乎并没有让菜单保持不变。

这些是我在原始文件中添加的代码::

在 html 文件上:

<!--sticky menu-->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--ends here-->

在 CSS 上:

.fixed{
    position:fixed;
    top:0;
    left: 0;
    width: 100%;
    background-color: transparent;

}

nav{
    z-index: 500;
    background-color: #ffffff;
}

.nav-placeholder{
    margin: 0 0 40px 0;
}

.fixed .nav-inner{
    padding: 0 20px;
}

.fixed .nav-inner-most{
    max-width:700px;
    margin: 0 auto;
    background-color: #ffffff;
}

js脚本:

jQuery(document).ready(function() {

    // define variables
    var navOffset, scrollPos = 0;

    // add utility wrapper elements for positioning
    jQuery("nav").wrap('<div class="nav-placeholder"></div>');
    jQuery("nav").wrapInner('<div class="nav-inner"></div>');
    jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');

    // function to run on page load and window resize
    function stickyUtility() {

        // only update navOffset if it is not currently using fixed position
        if (!jQuery("nav").hasClass("fixed")) {
            navOffset = jQuery("nav").offset().top;
        }

        // apply matching height to nav wrapper div to avoid awkward content jumps
        jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

    } // end stickyUtility function

    // run on page load
    stickyUtility();

    // run on window resize
    jQuery(window).resize(function() {
        stickyUtility();
    });

    // run on scroll event
    jQuery(window).scroll(function() {

        scrollPos = jQuery(window).scrollTop();

        if (scrollPos >= navOffset) {
            jQuery("nav").addClass("fixed");
        } else {
            jQuery("nav").removeClass("fixed");
        }

    });

});

总结: http://jsfiddle.net/misaki03/9gtk9x7r/1/

我希望有人能帮我解决这个问题。

我已经编辑了这个，因为我想知道这段代码是什么

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

在我正在关注的教程中，是为了。我跟着网站演示看到了这行令人困惑的代码。 (因为代码太长，我做了一个链接)

http://learnwebcode.com/tutorial-files/sticky-navigation/js/jquery-1.11.0.min.js

我不确定它是什么，但它确实有效。菜单现在处于粘性模式。但是，它显示子菜单以及我向下滚动它。有办法解决这个问题吗？

Answer 1

代码笔 http://codepen.io/noobskie/pen/avqVVd?editors=010

您正在寻找这样的东西吗？您刚刚遇到了一些 z-index 问题，这些问题阻碍了我想要的事情以及一些脚本错误。

这是粘性菜单的简洁版本

function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {
    // scrolled past the original position; now only show the cloned, sticky element.

    // Cloned element should always have same left position and width as original element.     
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}