Question

0

200

Views

Hide navigation when at the top

Hello how can i hide my navigation when not scrolling and show it when i scroll

i am using two menus at this link http://dev.thegabrielmethod.com/gabriel/

one on a white bg and the other on a blue bg

i would like to hide the navigation menu items on the white bg when not scrolling and then show them again when scrolling

This is what am trying which is not working

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

Please some one advice

about 4 years ago · Santiago Trujillo

3 answers

Answer question

0

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

Here! It won't show the menu while scrolling.. and will show it again when when scrolling finished.

Please inform if I have misinterpreted your question.

about 4 years ago · Santiago Trujillo Report

0

One way to do it is as follows:

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

Hope this helps

about 4 years ago · Santiago Trujillo Report

Answer question

Find remote jobs

Accepted Answer · 2022-06-13T20:58:52.828Z

I Observed your html as well. and found some issue. first is - you have set the margin for blue nav bar - margin-top: 100px; that is not required.

and the execute the below code.

open that site, and open developer tool > in console execute the below code, then scroll the page, you will see its working as expected.

You just need to execute the below code on page load, and it will handle the margin issue as well in second line..

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

Before Scroll

When Scroll

Update

As per you comment I understood you, in white one you just wanted to hide the menu not the logo itself. try the below code. as told you above now.

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

0

200

Hide navigation when at the top

3 answers

0

0

0

Find remote jobs

Andres GPT