Change Color after scrolling

  • ivorymuc

    (@ivorymuc)


    8 years ago

    Hey there,
    great plugin! It is working fine for me but I was wondering if I can make the menu background visible after someone scrolls a certain amount of pixels.
    Almost like in this example:
    https://callmenick.com/_development/resize-header-on-scroll/
    Though instead of resizing it is suppose to change the background from transparent to white.

    I already got the css working

    .site-header .navbar{
    background: #fff !important;
    }

    But I am missing something that says after how many pixels it should be white/non transparent.

    Thanks for you help!
    Sabina

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter ivorymuc

    (@ivorymuc)

    Is there no way? ??
    Would be awesome if someone knows how to do it.

    Hi, thanks for trying my plugin! ??

    Is there a way you can share a link to your site? That way I can see what’s going on and I can probably help you better.

    Thanks!

    Thread Starter ivorymuc

    (@ivorymuc)

    Hey Mark,
    yeah sure, sorry forgot to post it ??

    https://www.ivory-productions.com/ivorynewtest/

    Thanks ??

    Thanks for the link! ??

    I see what you mean now. And sorry, but my plugin wouldn’t be able to change the background color of the menu if the user scrolls X pixels.

    It’s possible with additional Javascript, perhaps something like this?

    $(window).scroll(function() {
  howMuchScrolled = $(window).scrollTop();
  console.log(howMuchScrolled);
  if (howMuchScrolled > 100) {
    $('.navbar').css('background-color','#000000');
  } else {
    $('.navbar').css('background-color','transparent');
  }
 });
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change Color after scrolling’ is closed to new replies.