Simple theme: A CSS trick for a smooth disappearance of the menu when scrolling ?

[Vinc26]

Hi there,

Yes, in the Simple theme, actually, when I scroll down, the menu appears smoothly (translation). But when scroll up, it disappear instantly. (last version of macOS and iOS).

Any idea?

:)

[michaelfluegge]

try
.top.sticky {
-webkit-animation: slideDown 2.5s cubic-bezier(.17,.67,0,1) forwards;
animation: slideDown 2.5s cubic-bezier(.17,.67,0,1) forwards;
}

I changed slideDown .5s to. slideDown 2.5s

[Vinc26]

I've tried it: it only slow down the appearance of the menu when we scroll down.

My problem is when I scroll up: it disappear instantly. You can try it here: https://demo.getpublii.eu/themes/simple/v3/

[michaelfluegge]

interesting. I use Safari, and with settings 2.5s it works fine for me when I scroll up ...
Maybe a chat with a GTP would help?

[Vinc26]

Here are 2 videos of what I get. The same problem with Safari and Chrome.
One video with .5s ; and the other with 2.5s

I would like to get the same effet like here: https://labs.semplice.com/headroom-js

Enregistrement.de.l.ecran.2024-11-29.a.09.31.25.mov

Enregistrement.de.l.ecran.2024-11-29.a.10.04.44.mov

[michaelfluegge]

I see. Maybe it’s a good idea to ask this question a CSS forum? According to chatGTP the CSS should work for Chrome and Safari

[michaelfluegge]

one addition: https://labs.semplice.com is a WordPress site using a plugin like "Sticky Menu (or Anything!) on Scroll:" or similar. I think it is not only CSS but some JavaScript, too.

[Vinc26]

Finally I found a simple solution!

The original Simple Theme is also using javascript to add/hide a .sticky class when scrolling.

In the https://labs.semplice.com/headroom-js page, there is a link to the solution https://help.semplice.com/hc/en-us/articles/360028553851-Hide-reveal-sticky-navigation-on-scroll

Here is how I've adapted it to Simple Theme:

1 - Load jQuery by adding custom HTML in Head:

<script type='text/javascript' src="https://mywebsite.com/jquery-3.7.1.min.js"></script>

2 - Add this custom HTML to Footer:

$(function() {
  var prev = 0;
  var $window = $(window);
  var nav = $('.top');

  $window.on('scroll', function(){
	var scrollTop = $window.scrollTop();
	nav.toggleClass('hide-navbar', scrollTop > prev);
	prev = scrollTop;
  });

  $(window).scroll(function() {
	  if ($(this).scrollTop() <= 300) {
		  $('.top').removeClass('hide-navbar');
	  }
  });
}) 

3 - Add this custom CSS:

.top {
  position: fixed !important;
  z-index: 10;
  transition: ease transform 0.5s !important;
}

.top.hide-navbar {
  transform: translateY(-100%) !important;
}

[gpsblues]

Hi,

When scrolling down, the .sticky class is added, which triggers an entrance animation. When scrolling up, the class is simply removed, causing the menu to disappear abruptly without any animations or transitions.

The script.js file should be modified to add an exit class, such as .hidemenu, to which a new CSS transition or animation can be applied.

Alternatively, instead of adding jQuery - which would go against Publii's principles of super-speed 😊 - you can ask ChatGPT to modify the beginning of script.js (which you’ll later need to minify) to include the .hidemenu class with just a few lines of code and the corresponding CSS for animation or transition.

Cheers!

[Vinc26]

Yes but since the beginning, I'm trying to not modify the theme itself. I only uses custom CSS ou HTML. And for an another need, I already load jquery. This is my only infidelity to the Publii spirit 😬😅