Show Menu on Scroll Up, hide on scroll down

I’m sorry but “hide menu on scroll up” option isn’t available yet. However we plan on adding this option in the future.
I wish this was something simple that I could just write some code for you but it’s too complicated for that. Again, sorry I can’t help with this just yet but hopefully soon we will add this option.
Lmk if there is anything else I can help with and I’m happy to hear you are enjoying my plugin.

@mohammed2152

You can create an elementor HTML element or use a plugin to add this code to your page to achieve this effect. No additional steps needed.

Here is a demo of it working
https://testing.robertwattner.com/

Here is a screenshot of the HTML element
https://testing.robertwattner.com/wp-content/uploads/2019/12/code-screenshot-plugin.jpg

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 600) {
if(mywindow.scrollTop() > mypos)
{
$('.she-header').addClass('headerup');
}
else
{
$('.she-header').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
});
});
});

</script>
<style>
.she-header {
-webkit-transition: transform 0.4s ease, all 0.4s ease !important;
-moz-transition: transform 0.4s ease, all 0.4s ease !important;
-ms-transition: transform 0.4s ease, all 0.4s ease !important;
-o-transition: transform 0.4s ease, all 0.4s ease !important;
transition: transform 0.4s ease, all 0.4s ease !important;
}
.headerup{
transform: translateY(-500px); /*adjust this value to be GREATER NEGATIVE THAN THE HEIGHT OF YOUR HEADER SECTION*/
}
</style>

**Remember to adjust the “600” in (mypos > 600) to HOW MANY PX FROM THE TOP TO ACTIVATE DISAPEARING EFFECT

I left that variable in there in case you wanted this to activate after the shrink effect.

• This reply was modified 4 years, 11 months ago by Robert Wattner.

Please when will there be an update. Thanks

@vitmap We are bug testing right now so it shouldn’t be long. This update has several new features, fixes, and changes so it’s taking longer than usual to get everything ironed out.
Sorry about the wait and thanks for your patience.

Hi Robert
can you please let me know if your plugin could help me to hide by default my main menu on my homepage (a splash video showing first) and then show the main menu on Scroll down ?
I saw you provided javascript code and CSS for the opposite (Show Menu on Scroll Up, hide on scroll down).
Thanks a lot
Regards
Damien

@damdo6996 Yes, my plugin could help with that. When activated it adds CSS classes to the header section for before and after scrolling. Those selectors can be used to target objects and style them according to each state example for your case: display CSS attribute.
So basically with my plugin enabled you could use some simple custom CSS to show/hide whatever you like before and after scrolling.
If you have a link I could help you with the CSS

Thanks a lot for your reply Robert.
HEre is a link to my website’s homepage where i want the header to show only on scroll down of the user (after he viewed the video).
https://www.groupe-elba.com/
D.

Hi Robert,

I tried the solution you mentioned on this page.

I’m experiencing two problems:
1. when scrolling upwards it does not change back to the original (transparant) header when it reaches this setting (mypos > 600).
2. when scrolling the header is not shrinked (only the size of the logo)

Any ideas about this?

Thanks in advance!

Hello friends, good afternoon.

Do you have a release forecast for this role?

It would be very useful

• This reply was modified 3 years, 11 months ago by Guilherme Souza.

@gsouza This feature is already available in the current free version.

Why not just add something like headroom.js and offer us even more cool header features?

https://wicky.nillia.ms/headroom.js/

@mrtank I am already using the same javascript to hide the header in the same way. Plus other js for changing other parts of the header. I would have to customize that code so much to make it work with what I’ve already done and work with elementor that it wouldn’t be worth while.
The only features I see that it has are using js to add css classes with predefined position or display attributes. I have already added more position options, offset options, and transition options, gradient background color, bottom shadow, more size units(px, %, vh, calc()) for scroll distance and hide header distance, replace logo image, menu text colors, and lots more to the beta pro version of my plugin. Which will hopefully be out soon.
Basically I’ve already added even more options than they have and they are designed specifically to work with elementor

Hi guys good morning.

@rwattner
Could you tell me how I can make two small adjustments?

1 – To make the menu smoother, it would be nice to show, hide and change the color with a transition.
Perhaps giving a small effect.
How can I do this ?
I am feeling the menu change very “dry”

2 – When clicking on an anchor, the menu takes you to the anchor location, but does not subtract the size of the menu itself, leaving an unnecessary space (This is when we activate the menu hiding when scrolling down)

Can you help me?

thank you so much

@gsouza Hi, do you have a link to the site you are working on by chance? I’d like to look at the code. Thanks

Hello Friend.

Yes I have.
Here’s the link: https://eloxy.barbas.digital/home/

This link takes you to a test page that we were using.
I will send a short video, showing some points, so that it is easier to understand the improvements we want to apply.

https://www.loom.com/share/390d01c82bdc4af5b949cbd6df3a9416

See how it changes very quickly, without any smoothing effect.
https://prnt.sc/wgecoq
https://prnt.sc/wgecjy

Here, as you can see, it is leaving the menu space.
https://prnt.sc/wged5u
https://prnt.sc/wgedb6

The correct thing would be to take it here.
https://prnt.sc/wgedgu

Thank you so much friend