Jump to content


show/hide menu when scrolling

Moderator Tag

Recommended Posts

Hello friends!
I am trying to repeat the effect of disappearance of the menu in scrolling. As it is done here: https://greensock.com/forums/topic/24688-problems-creating-sticky-nav/

I don't want the menu color to be displayed right away, like here:

See the Pen vYLpgGY by linkslegend (@linkslegend) on CodePen

but I can't repeat it :(
Who can tell you how to implement the effect correctly?

See the Pen jOryXay by Ollymolly (@Ollymolly) on CodePen

Link to comment
Share on other sites

Hey @Olga__Kondr


In your pen you are using LESS/SCSS-Syntax for the CSS, but are not pre-processing it at all.


So your


  &--scrolled {
    height: 0px;


inside of your .header is invalid.


I took it out of the .header and put it like this


.header--scrolled {
    height: 0px;


and it works just fine.


See the Pen 827669ed7571c9d1df3a9bc571094561 by akapowl (@akapowl) on CodePen




Also note, that I added a transition and an overflow: hidden to your .header in this example.



  • Like 5
Link to comment
Share on other sites

  • 3 months later...

Hi Guys, 


could you tell me how could I?

  1. activate nav.hidden_menu after scroll pass .content so when I scroll up the nav.hidden_menu will be shown and dissapear when I continue scrolling down.
  2. deactivate/hide nav.hidden_menu when I pass top of the point .content on the way back

See the Pen WNoXOLQ by timovega (@timovega) on CodePen


Link to comment
Share on other sites

@tomektomczuk Please create a new thread with a clearer description of what you're trying to accomplish along with which part of it you're stuck on.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.