Change background colour on scroll

  • paynelessmedia

    (@paynelessmedia)


    8 years, 7 months ago

    Hi,

    I’ve been searching through this forum and the provided answers haven’t been successful on my site.

    I am needing a transparent header and then on page scroll, the background of the header needs to turn to white.

    I’ve tried using the following JS in both the header and footer with no luck:
    <script>
    $(window).scroll(function() {
    howMuchScrolled = $(window).scrollTop();
    console.log(howMuchScrolled);
    if (howMuchScrolled > 100) {
    $(‘.site-header’).css(‘background-color’,’#FFFFFF’);
    } else {
    $(‘.site-header’).css(‘background-color’,’transparent’);
    }
    });
    </script>

    I’ve also tried the following CSS:
    .sticky-element-original:not(.sticky-element-active) {
    background: #fff;
    }

    AND

    .sticky-element-original:not(.sticky-element-active) .site-header {
    background: fff;
    }

    Any help would be greatly appreciated!

    P.S. I’m using Firefox

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Senff – a11n

    (@senff)

    8 years, 7 months ago

    Hi, thanks for trying my plugin! 🙂

    My plugin can not change the background color after scrolling an X amount of pixels (at least not with just CSS), but it can change colors between sticky and non-sticky.

    This can not be done with your menu with the way you have set it up now, because the menu is already sticky right on page load. So, because it’s always sticky, there is no “non-sticky” state in which it would have a different background color.

    Hope that makes sense?

Viewing 1 replies (of 1 total)

The topic ‘Change background colour on scroll’ is closed to new replies.