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

on 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

Codepen http://codepen.io/noobskie/pen/avqVVd?editors=010

你正在寻找这样的东西吗？您刚刚遇到一些z-index个问题，这些问题会影响我感觉到的内容以及一些脚本错误。

这是stickymenu的更清洁版本

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

Answer 2

在尝试寻找不同来源后，我能够在阿米特的帮助下解决问题。我看到了这个问题，并认为它在某种程度上类似于我需要的代码并尝试了它。我调整了一点虽然

这是参考链接：

sticky navigation with submenu and smooth scroll

我刚刚在他的jfiddle上添加了他提到的代码并且它对我有用，感谢@Amit和问题的主人

Answer 3

sticky是为CSS position属性引入的新值。该值应该像position：static一样在其父级中，直到达到给定的偏移阈值，在这种情况下，它就好像值是固定的一样。

.menu {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #bffff3;
    position: sticky;
 }

结帐此链接：http://www.sitepoint.com/css-position-sticky-introduction-polyfills/ 它可能会有所帮助。祝你好运

如何仅在粘性菜单上显示主菜单

3 个答案: