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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

下面！它在滚动时不会显示菜单..当滚动完成时它会再次显示。

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

Answer 2

一种方法如下：

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

希望这有帮助

Answer 3

我也观察了你的HTML。并发现了一些问题。首先是 - 您已设置blue导航条的余量 - margin-top: 100px;不需要。

并执行以下代码。

打开该网站，然后打开开发者工具＆gt;在控制台中执行以下代码，然后滚动页面，您将看到它按预期工作。

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

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 4

我希望此代码可以解决您的问题

＆＃13;

jQuery(window).scroll(function (event) {
    var scroll = jQuery(window).scrollTop();
    console.log(scroll);
if(scroll==0){
	jQuery('.include-nav').hide();
  jQuery('.nav-bar-below.op-page-header').css('margin-top','0px');
}else{
  jQuery('.include-nav').show();
  jQuery('.nav-bar-below.op-page-header').css('margin-top','100px');
}
});

＆＃13;

在顶部隐藏导航

4 个答案: