Navbar Hideaway Not Working on Android

Support
#1

We have our navbar set to disappear when the user is scrolling down on mobile, and reappear when they scroll back up or reach the top bottom. We did this with your help through this thread. Our homepage is here and the relevant CSS and Javascript is in Global.

The behavior is working great on Apple devices, but apparently not working on Android. You perhaps were hinting that this may be the case at the end of the thread by providing a link to a site that discussed getting scroll bar positions with javascript. Is there an easy fix to get this behavior working in Android too?

Off topic: Do you know of a simulator that will show Android behavior on mobile with various browsers? The ones I have found online are terrible, and don’t come close!

Thanks!

#2

Hello Ergo,

Thank you for the details. I have tested your site in my android phone and this is what I am seeing:

What should be the expected output?

Please let us know how it goes.

#3

Thanks for the quick response. Yes, that looks correct, but if you scroll down the black bar at the top with ERGO ARCHITECTURE should disappear, and reappear when you scroll back up. This is particularly important in landscape format, which we suggest our users switch to if they are holding a phone in portrait format.

#4

Hello Ergo,

When I scroll up, this is what I am seeing:

Portrait:

Landscape:

Please let us know how it goes.

#5

Unfortunately the navbar does not appear to be hiding as it should. I am using this jscript:

(function($){
  var iScrollPos = 0;
 
    $(window).scroll(function () {
        var iCurScrollPos = $(this).scrollTop();
         if (iCurScrollPos > iScrollPos) {
            //Scrolling Down
            $('.x-navbar').addClass('hidden-away');
        } else {
           //Scrolling Up
	           $('.x-navbar').removeClass('hidden-away');
        }

        if(document.body.scrollTop == 0) $('.x-navbar').removeClass('hidden-away');

        iScrollPos = iCurScrollPos;
    });
})(jQuery);

With this CSS:

.x-navbar { opacity: 1; transition: all 0.5s ease; }
@media (max-width: 979px) {
    .x-navbar-fixed-top {position: fixed;} /* Stops mobile menu bars from scrolling off the screen  */
}
@media (max-width: 1279px){
    .x-navbar.hidden-away { opacity: 0; }
}

This works on iPhones, iPads and other Apple devices to completely hide the navbar so the full screen is available for content when the user is scrolling down, but obviously is not working on Android. Is there an easy fix to make this work on Android too?

Thanks!

#6

Hello Ergo,

There is some wrong with your code.

You must update it and use this instead:

(function($){
  var iScrollPos = 0;
 
    $(window).scroll(function () {
        var iCurScrollPos = $(this).scrollTop();
        console.log('scrolling: ' + iCurScrollPos);
         if (iScrollPos > iCurScrollPos ) {
            //Scrolling Down
            $('.x-navbar').addClass('hidden-away');
        }

        console.log('scrolling-: ' + iScrollPos);

        if(document.body.scrollTop == 0) {
        	$('.x-navbar').removeClass('hidden-away');
        }

        iScrollPos = iCurScrollPos;
    });
})(jQuery);

Hope this helps. Please let us know how it goes.

#7

Unfortunately I don’t have an Android device to test on, but this no longer works on Apple. The navbar disappears properly when I scroll down, but does not reappear when I scroll up. It only reappears when I am all the way back to the top of the screen, then does not disappear if I scroll down again. The proper behavior is:

  • Scroll Down: Navbar disappears
  • Scroll Up: Navbar reappears
  • Top of Screen: Navbar visible
  • Bottom of Screen: Navbar visible

It was working properly on iOS, just not Android.

Thanks!

PS: I have left your proposed code in place for nowl…

#8

Hello Ergo,

There is something wrong with your conditions in the code. I have revised it. You can make use of this code instead:

(function($){
  var lastScrollTop = 0;
 
    $(window).scroll(function () {
        var currentScrollTop = $(this).scrollTop();
        
         if (currentScrollTop > lastScrollTop  ) {

         	console.log('scrolling-: ' + lastScrollTop);
            //Scrolling Down
            $('.x-navbar').css({'opacity': 0, 'transition': 'opacity 0.5s ease'});
        }

        if (lastScrollTop > currentScrollTop ) {

            //Scrolling Up
            $('.x-navbar').css({'opacity': 1, 'transition': 'opacity 0.5s ease'});
        	console.log('scrolling: ' + currentScrollTop);
        }

        

        if( $(this).scrollTop() == 0) {
        	$('.x-navbar').css({'opacity': 1, 'transition': 'opacity 0.5s ease'});
        }

        lastScrollTop = currentScrollTop;
    });
})(jQuery);

We would love to know if this has worked for you. Thank you.

#9

Great! I made the change and it works again on my iPhone! Is the menu disappearing when you scroll down on your Android now?

Thanks!

#10

Hello Ergo,

Yes, the proper behaviour is working now.
If you need anything else we can help you with, don’t hesitate to open another thread.

Regards.

#11

Great! Thanks so much!

#12

You’re most welcome.

Hope that helps and thank you for understanding.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.