在顶部隐藏导航

Question

你好，当我没有滚动时，我如何隐藏我的导航，在滚动时如何显示它？

我在这个链接http://dev.thegabrielmethod.com/gabriel/上使用两个菜单

一个在白色bg上，另一个在蓝色bg上

当不滚动时，我想隐藏白色bg上的导航菜单项，然后在滚动时再次显示它们。

​

​

这就是我正在尝试的不起作用的东西。

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
        var headerTop = $('#header').offset().top;
        var headerBottom = headerTop + 120; // Sub-menu should appear after this distance from top.
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
            if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom
                if (($("#navigation-alongside").is(":visible") === false)) {
                    $('#navigation-alongside').fadeIn('slow');
                }
            } else {
                if ($("#navigation-alongside").is(":visible")) {
                    $('#navigation-alongside').hide();
                }
            }
        });
    });

</script>

请给我一个建议

Answer 1

我也注意到你的html了。发现了一些问题。首先，您已经为blue导航栏- margin-top: 100px;设置了不需要的页边距。

并执行以下代码。

打开该站点，在控制台中打开developer tool >，执行下面的代码，然后滚动页面，您将看到其正常工作。

您只需在页面加载时执行以下代码，它也将在第二行处理保证金问题。

jQuery('.banner.include-nav').fadeOut();
jQuery('.nav-bar-below.op-page-header.cf').css({'margin':'0px'});
var h = jQuery('.nav-bar-below.op-page-header.cf').height();
jQuery(window).scroll(function () { 
    if(jQuery(window).scrollTop() > h)
    {
        jQuery('.banner.include-nav').fadeIn();
    }
    else 
    {
        jQuery('.banner.include-nav').fadeOut();
    }
})

先于卷轴

​

​

时滚动

​

​

更新

根据你的评论，我理解你，在白色的一个，你只是想隐藏菜单，而不是标志本身。试试下面的代码。就像上面告诉你的那样。

jQuery('.banner.include-nav > .fixed-width.cf > .sixteen.columns').fadeOut();
//jQuery('.nav-bar-below.op-page-header.cf').css({'margin':'0px'});
var h = jQuery('.nav-bar-below.op-page-header.cf').height();
jQuery(window).scroll(function () { 
    if(jQuery(window).scrollTop() > h)
    {
        jQuery('.banner.include-nav > .fixed-width.cf > .sixteen.columns').fadeIn();
    }
    else 
    {
        jQuery('.banner.include-nav > .fixed-width.cf > .sixteen.columns').fadeOut();
    }
})

Answer 2

​

$(document).ready(function() {
  $(window).scroll(function() {
    $(".menu").css({
      'display': 'none'
    });
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
      $(".menu").css({
        'display': 'block'
      });
    }, 100));
  });
});

.menu {
  position: fixed;
  display: block;
  width: 100%;
  height: 150px;
  margin: 0px !important;
  box-shadow: 0 2mm 10px #aaa;
  text-align: center;
}

body {
  padding: 0px !important;
  height: 200vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="menu"><br/>
    <h1>Menu Box</h1>
  </div>

</body>

​

这里!它不会在滚动时显示菜单。当滚动完成时会再次显示。

如果我误解了你的问题，请告知。

Answer 3

这样做的一种方法是：

window.onscroll = function(e) {
    topMenu = document.querySelector('.banner.include-nav');
    scrollTopAmount = document.body.scrollTop;

    if (scrollTopAmount != 0) {
        topMenu.style.display = 'none';
    }
    else
        topMeny.style.display = 'block';
}

希望这能有所帮助