Fade menu to a certain percentage when scrolling?

  • Resolved tgp1994

    (@tgp1994)


    7 years ago

    As far as I can tell, there doesn’t seem to be a feature where we can have the top menu fade when the page is scrolled. I think that might look nice so you can sort of see the content scrolling underneath your menu, while still being able to tell that the menu is available. Would it be possible to have this implemented?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Senff

    (@senff)

    Hi, thanks for trying my plugin! ??

    Indeed, with my plugin it is only possible to have two states of your element — either sticky, or non-sticky.

    The ability to set the opacity (how much it’s faded) based on the scrolled position is not part of this plugin, and would take a different approach, which would be a lot more advanced I’m afraid.

    thebark

    (@thebark)

    I had the same question, however, I’ll pose it this way: is it possible to have this effect by changing your header setting so it already has an opacity level to it? I fiddled around with the web inspector and added some of the coding to the site-header shown below and it works, unfortunately it can’t be saved and as I’m just learning this stuff myself, I’m unsure of what the actually CSS (I’m assuming) would be to implement or if I’d have to go in via the editor somewhere.

    thebark

    (@thebark)

    Found one that works! Mind you, I had to customize it a bit because I didn’t want the header on my homepage:

    body:not(.home) .site-header {
    background-color: rgba(0,0,0,0.8);
    }

    You can change the value of the opacity to your liking.

    Thread Starter tgp1994

    (@tgp1994)

    Thank you for posting that!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Fade menu to a certain percentage when scrolling?’ is closed to new replies.