X Pro Header : Behavior Header Navigation 2020 "Scroll Down Auto Hide & Appear on Scroll Up

Support
#1

Greetings Themeco.

Good Morning from Malaysia.

I’ve read some article here Themeco Forum (X Pro), I tried and seems almost work already!. As programming code:

Theme Option > Globas JS:

(function($){
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$(’.x-masthead’).removeClass(‘nav-up’).addClass(‘nav-down’);
} else {
$(’.x-masthead’).removeClass(‘nav-down’).addClass(‘nav-up’);
}
lastScrollTop = st;
});
})(jQuery);

and, Theme Option > Globas CSS

.x-masthead {
transition: opacity 1s ease;
}

.x-masthead.nav-up {
opacity: 1;
}

.x-masthead.nav-down {
opacity: 0;
}

and I did changed “transition: opacity 1s ease;” to “transition: all 1s ease;”

All I need to make the Navigation Bar ease smoothly while hide and appear.

Please help guys… you’re my only hope!

Sincerely
Ady

#2

Hey Ady,

Thanks for writing in!

Are you troubleshooting the code in DrKamsiah site? I have checked it and there appears to be a JS error on the page:

Uncaught SyntaxError: Unexpected end of input

It is coming from this custom JS code:

jQuery(function($) {
  $('.x-menu li.menu-item a.x-anchor').on('click touchend', function(event) {
    var button = $(".x-off-canvas-close");
    if( button.length > 0 ){
      button.trigger('click');
    }
  });

By the way, I think transition: opacity 1s ease; should be used in your code. You may also change it to ease-in or ease-in-out. You can check this out:

Hope this helps.

#3

Hi there again Ruenel,

Sorry I am referring to https://stagingmathpert.liger2u.com/ (X Pro my company licensed unlimited).

I am actually seeing that code transition “ease in”.

Let me try it… if its working… i will do complete programming here in this very topic.

#4

Hi there Ruenel,

No luck. so far… didnt see any smooth transition

.x-masthead {
transition: all 1s ease-in;
}

.x-masthead.nav-up {
opacity: 1;
}

.x-masthead.nav-down {
opacity: 0;
}

#5

Hello Ady,

Instead of targeting just the masthead, you will have to target the fixed bar instead. Have your custom code updated and use this instead:

.x-masthead .x-bar-is-sticky {
    transition: all 0.35s ease;
}

.x-masthead.nav-up .x-bar-is-sticky{
    opacity: 1;
}

.x-masthead.nav-down .x-bar-is-sticky{
    opacity: 0;
}

Be advised that you will be the one to maintain the code every after theme updates. You must check the code whether it still work with the updates or not.

To know how did I find the class selector of the fixed bar, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Hope this helps.

Pro Header: Opacity changes when scrolling down
#6

Hi there again Ruenel,

UUUuuuuuu… cool… its kinda there already…

one last thing!

How do i make the Bar slide in while Scroll Up and Slide out smoothly? The example like this website : https://thefutur.com/

Your Sincerely Dude
Ady

#7

Hey Ady,

The example site URL is using CSS transform translate 3d property. You may need to create a custom code for your own site. You can check out this article for more help:

Be advise that custom coding is beyond the scope of your support. You may need contact a 3rd party developer to do this customizations for you if you are not familiar with coding.

Note : We are unable to provide support for this customization request under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.

Best Regards.

#8

Thank you so much Ruenel. I will try to do the custom CSS Transform 3D Property… It almost there though… Thank you so much. Hope you have a great day.

Good day!

Sincerely
Ady

#9

Glad we could help,

Cheers!

#10

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