[kitchenHEISTParticipant]

Hi Guys,

I have found the following code in one of forum posts looking to make my header sticky only on scroll up.

/* START HEADER ONLY STICKY ON SCROLL UP */
jQuery ( function($) {

var tempscroll = 0;
$(window).scroll(function(event){
   var scrollTop = $(this).scrollTop();
   if (scrollTop > tempscroll){ //Remove fixed positioning when scrolling down
      if ( $('.x-navbar').hasClass('x-navbar-fixed-top') ) $('.x-navbar').removeClass('x-navbar-fixed-top')
   } 
   tempscroll = scrollTop;
});

} );
/* END HEADER ONLY STICKY ON SCROLL UP */

I can say that it works very well and the more I use/customize X the more I think that it is the most awesome theme ever.
One thing which would be great to improve is to make a header reappear more smoothly like you can see on this website https://www.chefsteps.com
Is there a tweak you could suggest to achieve that?
My URL https://kitchenheist.co.uk
Thank you

[NicoModerator]

Hi There,

Thanks for writing in.

You concern is beyond the scope of our support because it is a under custom development already. It would be best to contact a developer for this one already. If you wish to create the effect on your own, I have a tip is has something to do with the css below:

x-navbar {
    transition: transform ease 400ms;
    transform: translate3d(0, -28px, 0);
    -webkit-transform: translate3d(0, -28px, 0);
    -webkit-transition: -webkit-transform ease 400ms;
}

.x-navbar-fixed-top{
    transition: transform ease 400ms;
    transform: translate3d(0, -1px, 0);
    -webkit-transform: translate3d(0, -1px, 0);
    -webkit-transition: -webkit-transform ease 400ms;
}

Hope it helps.

Let us know how it goes.

Thanks.

[kitchenHEISTParticipant]

Hi Guys,

Thank you for the code. I have managed to tweak it to get the header moving the way I want (you can see it at https://kitchenheist.co.uk) ,but do not know how to get it to appear from the very top of the screen (part which is hidden) instead of the way it is now. Could you give me any leads?
Thank you for your time.

[John EzraMember]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-navbar.x-navbar-fixed-top {
    top: -65px;
}

Hope this helps – thanks!

[kitchenHEISTParticipant]

That’s awesome guys. Thank you. You can see that it works very nicely on desktop now.
One thing I have noticed on small screens/mobile that page sort of ‘jumps’ up (on the first movement up) instead of scrolling smoothly. Could you provide any info on this matter, please?

[RadModerator]

Hi there,

First, let’s try to fix a type error. Please add that before x-navbar, should be like this

.x-navbar {
    transition: transform ease 400ms;
    transform: translate3d(0, -28px, 0);
    -webkit-transform: translate3d(0, -28px, 0);
    -webkit-transition: -webkit-transform ease 400ms;
}

.x-navbar-fixed-top{
    transition: transform ease 400ms;
    transform: translate3d(0, -1px, 0);
    -webkit-transform: translate3d(0, -1px, 0);
    -webkit-transition: -webkit-transform ease 400ms;
}

The jumping could be related to that since it needs initial position/value.

Let us know when done. Cheers!

[kitchenHEISTParticipant]

Hi there,

Thank you for noting that. I have fixed the code and noticed that it does act differently then I reach the top of the screen, so the code is working.
Unfortunately it seems that the ‘jumping’ problem persists on the smaller screens (once mobile menu appears). Could you suggest any other solution, please?
Thank you for your time.

[RadModerator]

Hi there,

What mobile you’re testing it on? I checked it’s not jumping, would you mind providing a screen recording?

Or maybe you’re referring to the animation effect when it’s appearing and disappearing while scrolling up and down?

Would you mind setting your navbar to fixed position at Admin > Appearance > Customizer > Header. It’s not currently set to fixed top.

Thanks!

[kitchenHEISTParticipant]

Hi there,

I am using Samsung Galaxy S5, but that is not relevant since the same problem happens when I reduce screen size to less than 979px on my desktop browser.
My header is set to Fixed Top, I am unsure why it does not show as that to you.
Regarding the effect, I am happy the way it looks (smoothly appears on scroll up).
The ‘jumping’ might not seem obvious at first, but you can see the difference on mobile vs regular screen. At the point when you start scrolling up content ‘jumps’ up slightly on mobile.
Please let me know if you notice it, since I do not know how to make a screen recording.
Thank you.

[RadModerator]

Hi there,

From the source code, there is no x-navbar-fixed-top at all. Hence, I suggested to turn on your Fixed top navbar.

And because it’s not there, this CSS isn’t active either

.x-navbar-fixed-top{
    transition: transform ease 400ms;
    transform: translate3d(0, -1px, 0);
    -webkit-transform: translate3d(0, -1px, 0);
    -webkit-transition: -webkit-transform ease 400ms;
} 

Before we do continue about the jumping, maybe we need to fix that fixed positioning first. Who knows, maybe that’s the reason why it jumps. And I can’t perceive what’s jumping on my view, all I could see is the smooth scroll and up of the navbar.

Would you mind providing your admin login credentials in private reply?

The culprit is probably this,

/* START HEADER ONLY STICKY ON SCROLL UP */
jQuery ( function($) {

var tempscroll = 0;
$(window).scroll(function(event){
   var scrollTop = $(this).scrollTop();
   if (scrollTop > tempscroll){ //Remove fixed positioning when scrolling down
      if ( $('.x-navbar').hasClass('x-navbar-fixed-top') ) $('.x-navbar').removeClass('x-navbar-fixed-top')
   } 
   tempscroll = scrollTop;
});

} );
/* END HEADER ONLY STICKY ON SCROLL UP */    

How about removing it temporarily? It removes .x-navbar-fixed-top when scrolling dowm, hence the CSS above has no use at all.

Thanks.

[Author]

Posts