Scroll header/ menu

[amitmalhotra1]

Hi Team,

I have used X and Pro themes for more than 30 websites for my clients. Most of the things can be customized with this powerful theme. But somehow I can’t figure out how to do scroll sticky menu that hides when you scroll down and shows when you scroll up. You can see the example on this website - https://www.servicenow.com
I believe this is very common these days and I see this as out of the box in most themes. I also could not find this on pro either. Can you suggest me a way to do that either by css or by any plugin?

Thanks,
Amit

[paul.r]

Hi Amit,

Can you provide us your site url so we can take a closer look.

For the meantime, you can try adding this in Theme Options > CSS

.x-navbar.x-navbar-fixed-top {
    display:none;
}

Then add this in Theme Options > js

jQuery(function($) {
    $(window).scroll(function(){  
    if($(this).scrollTop()==0){
        $('.x-navbar').removeClass('x-navbar-fixed-top');
    }
  });
});

Hope that helps

[amitmalhotra1]

Thanks for the prompt help. But I added those and nothing works.
URL is - www.igt.ph/demo

[ruenel]

Hello Amit,

Sorry if it did not work. Please remove all the custom css and custom JS given by @Paul_r.

To resolve your issue, please use this custom JS instead:

(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');
	    }
	    iScrollPos = iCurScrollPos;
	});
})(jQuery);

And then you’ll need this custom css too:

.x-navbar {
    opacity: 1;
    transition: all 0.5s ease;
}

.x-navbar.hidden-away {
    opacity: 0;
}

We would loved to know if this has work for you. Thank you.

[amitmalhotra1]

Super! Works like charm. Thanks for your help.

[lely]

You are very much welcome!

Cheers!

[ErgoArchitecture]

This is a nice feature for mobile, and I was going to incorporate it for mobile only by modifying the CSS slightly to:

@media (max-width: 767px){.x-navbar.hidden-away { opacity: 0; }}

This worked great, the only problem I am having is that the navbar disappears when I scroll back to the top of the screen on mobile. Oddly this does not occur when I test it at mobile widths on the desktop, only when I am actually using it on my phone. Link to test page.

It might be related to this issue, which Paul solved for me this morning? It certainly won’t be the end of the world if I can’t get it to work, but it is a great feature for mobile, particularly because it makes portrait format almost usable! Any help with this would be most appreciated.

Thanks!

[rad]

Hi Ergo,

Thanks for reaching out.

May I know which phone and browser you’re testing it with? I checked on my mobile and it works okay, safari and chrome. The header appears back when I scroll up.

Perhaps you didn’t scroll it all the way up? Because it will only reappear the equivalent scroll top of zero var iScrollPos = 0;.

Thanks!

[ErgoArchitecture]

Hi Rad. Very strange!

To clarify, the navbar comes on when I begin scrolling up, and stays on until I reach the top. Once I am at the top of the screen the navbar goes off and stays off, leaving an odd gap at the top of the page.

I am using an iPhone 6 with Safari and Chrome on IOS 10.3.3. Maybe the old OS is contributing? I did some experiments and found that it never works on Safari, but it works on Chrome as long as I don’t let it coast back to the top of the screen. If I let it coast the menu is on until the screen “bounces” at the top, then the navbar disappears and won’t come back. If I sneak up on it with my finger on the screen the whole time, the navbar stays.

In Safari I can’t make it stay at all. Oddly, if I pull down when the screen is already at the top the navbar comes back on as I stretch the screen away from the top:

But when I let go and the screen sucks back up to the top the navbar disappears again:

Any thoughts?

[rad]

Hi there,

Based on the code, it should only displays if you reached the very top and should stay hidden even if you scroll up and down while still nor reaching the top. And it’s the behavior I’m seeing, would you mine removing the first set of customization above? It maybe conflicting than the second.

Then I’ll continue checking, I’m on IOS 12.1.4 and maybe that could be the reason too.

Thanks!

[ErgoArchitecture]

Hi Rad,

Sorry for the delay, but family stuff… Anyhow, when you say to remove the first set of customization above, did you mean:

@media (max-width: 979px) {.x-navbar-fixed-top {position: fixed;}}

If so, I can’t really remove that or the menu does not show up at all! (Or only when I am stretching the screen down from the top. All other times no menu bar.

I did some more checking around: My iPad behaves just like my phone, never working on Safari, but working intermittently on Chrome. However, I tested on a Samsung Galaxy Tab and it worked perfectly in Chrome and whatever Samsung calls their browser. It is also working perfectly when I stretch down in Chrome on my desktop if I open in a new process and not through Cornerstone.

Very strange…

[paul.r]

Hi @ErgoArchitecture,

To fix it, you can try adding this in Theme Options > CSS

body {
  -webkit-overflow-scrolling: auto;
}

Hope that helps

[ErgoArchitecture]

Still no joy.

The body { -webkit-overflow-scrolling: auto;} did not seem to do anything. I even added !important.

I have tried it on 4 iPhones including a new X, and 3 iPads and it won’t work properly on any of them, so it seems to be an Apple problem. So far it works on everything non-Apple. I wish Apple wasn’t such a big share of the market! It even works fine on Apple until you return to the top, in which case the menu bar still disappears!

[thai]

Hi @ErgoArchitecture,

Please try updating the custom JS to this:

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

For more information, please take a look at this:

http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

Let us know how it goes!

[ErgoArchitecture]

That did it! Thank you so much!

[lely]

You’re always welcome!

Glad this is now sorted out.

Cheers.