粘性导航栏，如何在向下滚动时隐藏并在向上滚动时显示

Question

I'm trying to hide the sticky nav bar on scroll down and show it again whilst the screen is being scroll up. At the moment the sticky nav bar is still operating as normal without this affect.

Not sure what I need to do to fix it:

HTML:

<header id="site-header" class="header-footer-group _mPS2id-t mPS2id-target mPS2id-target-first mPS2id-target-last" role="banner">
    
</header>

CSS:

#site-header{
    opacity: 0.9;
    width:100% !important;
    z-index:99999;
  position: sticky;
    position: -webkit-sticky;
  top: 0;
    height:166px;
}

.navup{
    transform: translatey(-166px);
}

Javascript:

<script>
var my_window = window;
var position = my_window.scrollTop;
    
my_window.scroll(function () {
    if (my_window.scrollTop  > position) {
        $('#site-header').addClass('navup');
    }else{
        $('#site-header').removeClass('navup');
    }
    
    position = my_window.scrollTop;
});
    
</script>

Answer 1

In first line of script, you should create a selector of window object, like: $(window) . After that, add parenthesis after every scrollTop occurence, like this scrollTop() since it is a method, not a property.

This should do it:

var my_window = $(window);
var position = my_window.scrollTop();
    
my_window.scroll(function () {
    if (my_window.scrollTop()  > position) {
        $('#site-header').addClass('navup');
    }else{
        $('#site-header').removeClass('navup');
    }
    
    position = my_window.scrollTop();
});