Can’t do Transparent header using JS & CSS

  • beefmannn5

    (@beefmannn5)


    3 years, 8 months ago

    I’m trying to do transparent header and I found this code online:
    CSS:
    body {
    min-height:800px;
    }
    .ehf-header header {
    z-index: 30;
    position: fixed;
    width: 100%;
    top: 0;
    }
    .changebackground{
    background-color:white;
    transition: background 500ms ease-out;
    }

    JS:
    jQuery(window).ready(function() {
    jQuery(window).scroll(function() {
    var scroll = jQuery(window).scrollTop();
    if (scroll > 100) {
    jQuery(“header”).addClass(“changebackground”);
    } else {
    jQuery(“header”).removeClass(“changebackground”);
    }
    });
    });

    The developer online said: to change the class to my header class, which his: #masthead
    so I switched the “header” in JS to “#masthead”

    P.S: the css code that do the Sticky style worked, only the transparent didn’t.

    • This topic was modified 3 years, 8 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Can’t do Transparent header using JS & CSS’ is closed to new replies.