Header JS change to make secondary menu appear sooner

[fnbit]

I have a site with three bars in header pro:
http://jazznew.thejazzcorner.com/

When the site is first scrolled (10 px or more) I want the hidden secondary menu and logo to replace the first one entirely, including when the site is scrolled back to the start at <10px. I started trying out some JS to change the CSS after scrolltop but it’s rather sloppy. I am not opposed to only using 2 bars and JS to make the smaller logo appear if that’s easier.

Here’s my testing JS. I have stripped it out while I await a reply.

(function ($) {
  $(document).ready(function(){
    //var H = $(window).height();
    $(window).scroll(function () {
        
       // set distance user needs to scroll before we start fadeIn
       if ($(this).scrollTop() > 10 ) {
        $('#topbar').css({'opacity': 1, 'visibility': 'visible'});
        $('#middlebar').css({'opacity': 1, 'visibility': 'visible'});
        $('#bottombar').css({'opacity': 0, 'visibility': 'hidden'});
       } else {
        $('#topbar').css({'opacity': 0, 'visibility': 'hidden'});
        $('#middlebar').css({'opacity': 0, 'visibility': 'hidden'});
        $('#bottombar').css({'opacity': 1, 'visibility': 'visible'});
       }

    });
  });
}(jQuery));

[ruenel]

Hello @fnbit,

Thanks for writing in!

Please aware that the bars needs to reach to the top or the scrolltop() condition to be true so that it triggers the appearance/disappearance. And aside from that, there is a css transition added by default. To remove the transition, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.site .x-bar-is-sticky, 
.site .x-bar-is-sticky .x-bar-content {
    transition-duration: 0s !important;
}

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

[fnbit]

Thanks for the info.

If I want the bar to dissapear sooner than when it reaches the scrolltop() condition, is there another way to define when it should dissapear? I’ve been looking over different options in regards to offset vs position, I’ve probably just picked the wrong condition for the change to happen.

[ruenel]

Hello @fnbit,

For sticky bars or initially hidden bars, you can set the offset to 0 or at least less than 5 so that it will automatically display the sticky bar as you scroll the page.

Hope this helps.

[fnbit]

OK So I can use trigger offset to set when the hidden bar/sticky bar appears. What about making the top two bars disappear sooner? The JS I tried setting visibility to zero also leaves the space where the bars exist, so probably need a better method to hide it AND a way to do so before scrolltop() is reached.

[ruenel]

Hello @fnbit,

Please be informed that setting the opacity and the visibility will only make the elements of the bar hidden or visible. It will still have the height of the bar. This is why as the elements were hidden away you will see a blank space. You might need to update your JS code and change it from {'opacity': 0, 'visibility': 'hidden'} and {'opacity': 1, 'visibility': 'visible'} to {'display': 'none'} and {'display': 'block'}.

Hope this helps.

[fnbit]

That helps with the extra space, so now I’m just trying to determine how to hide the top bar after 5px of scrolling vs the entire height of the topbar before it disappears.

[ruenel]

Hello @fnbit,

Are you still making/adding the codes in this site, http://jazznew.thejazzcorner.com/ ?
I am lost at the moment because I am only seeing this javascript:

jQuery(function($){
  $(window).scroll(function(){
    var aTop = $('#topbar').height();
    if($(this).scrollTop()>=aTop){
         $('#topbar').hide();    
    } else {
         $('#topbar').show();   
    }
  });
});

And I also do not set the IDs of your bar elements.

Please clarify a little further. Thanks.

[fnbit]

I have been experimenting with different scripts but currently not commited to any JS changes there.

The three bars are
(only should appear when site is at top of viewport <10 px)
topbar
middlebar
(Should appear immediately after ~10 px down)
bottombar

[fnbit]

I should add that currently none of the scripts make the topbar or middlebar disappear soon enough because they rely on Scrolltop. Also there’s a weird secondary scrollbar in Firefox I haven’t figured out yet.

[christian]

Hey @fnbit,

Our themes does not regretfully have a feature that will make bars disappear solely upon scrolling. Hiding and showing of bars is only connected to the Sticky feature.

What you need would require custom development which is not covered in our product support. I’ll give you an idea but it would be your responsibility to fix or enhance what I’m going to show you.

Please watch the screencast below which also shows how to fix the double scrollbar issue. The double scrollbar is being caused by the negative bottom margin of the Row in your last Section.

If you notice, the condition in the code I showed there is similar to what you posted in your first post. I just used jQuery’s hide and show functions. If the custom JS doesn’t work well for you or you need improvements, please have a third party developer improve it.

Hope that helps and thank you for understanding.

[fnbit]

@christian_y

I noticed that in the code. I understand the custom product support option I was just pinging to see if anyone had a suggested condition other than “scrolltop” which according to a response “Please aware that the bars needs to reach to the top or the scrolltop() condition to be true so that it triggers the appearance/disappearance.” which i read to mean “the bar has to surpass the top of the viewport”. If that’s wrong so be it. I’ll go digging in JS documentation for various conditions if that’s what’s needed.

In regards to the second scroll bar I’ll dig into that, was originally a hack to remove some padding. Because I have the first row in X Pro negative padded underneath the headers it causes numerous apparent issues including jumplinks being off and (I believe) the extra padding at the bottom. If there’s a cleaner way for headers over the first row/slider i’m all ears.

Thanks

[rad]

Hi @fnbit,

Yes, that would still require custom development and it’s not going to be a simple one. As it may be related to core functionality modification.

I assume the spacebar is now okay, glad it works now.

Thanks!