Need Help with Hide Menu on Scroll

I Need Help
1

I’m newbie here, wish to migrate all my previous Muse projects to Blocs. I have created a site but I don’t know whether this is possible with Blocs app. Appreciate all your supports.

Samples here

  1. https://bootstrap-menu.com/detail-smart-hide.html

  2. How To Hide Menu on Scroll

2

Hello @iPrint, welcome to forum, and as you’r starting there is your welcome gift:
I offer you the instructions detailed:

  1. Add a bloc called “Navigation Menu left” for example:

image
image2524×1192 324 KB

  1. Click in the left : “Layer Navigator” and then in the bloc that you have your navbar,
  2. In the right under “classes” add the following classes (type it one by one):
  • scrolled-down
  • scrolled-up
  • smart-scroll

image
image2524×468 60.9 KB

  1. Go to page preferences (that symbol between the name of the page and the arrows):

image

  1. In Add Code button, copy and paste the following code:
<script>
document.addEventListener("DOMContentLoaded", function() {
		$('body').css('padding-top', $('.navbar').outerHeight() + 'px')

if ($('.smart-scroll').length > 0) { // check if element exists
    var last_scroll_top = 0;
    $(window).on('scroll', function() {
        scroll_top = $(this).scrollTop();
        if(scroll_top < last_scroll_top) {
            $('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
        }
        else {
            $('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
        }
        last_scroll_top = scroll_top;
    });
}

});
</script>

<style>
.smart-scroll{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.scrolled-down{
   transform:translateY(-100%); transition: all 0.3s ease-in-out;
}
.scrolled-up{
   transform:translateY(0); transition: all 0.3s ease-in-out;
}
</style>

And that’s it…

Check it working here.

hope it helps you and welcome one more time.

1 Like
3

Great implementation @Pealco

The one problem with these scripts is they always break when you scroll back up to the top in safari. (I think its related to the bounce). I haven’t tested it, but I think adding an offset of -10px or something may solve it? Im not sure.

2 Likes
4

I try with a few solutions, but apparently I can’t find a solution for this, it seems that when page bounce, as the bounce come to down it hides the navbar and in the end as the final result of bounce is go up it shows the navbar…

Even in the original posts that happend as well…

Sorry no solution for now, I can only disable bounce in iOS not in Safari to MacOS.

In chrome works very well…

5

Superb. Much appreciated your time for this. :pray:

1 Like