Wijzig koptekst achtergrond kleur als de pagina scrollt

Heb ik gekeken naar een oplossing voor dit, maar ik kan het niet krijgen om te werken.

Ik zou graag mijn pagina header te veranderen van een transparante achtergrond op een witte achtergrond als de gebruiker begint te scrollen van de pagina.

HTML code is:

<div class="header">
    <div class="topbar"></div>
    <div class="sitelogo"></div>
    <nav id="navigation">
        <ul>
            <li id="twitter"><a href="http://www.twitter.com/iamdanmorris"><em>Twitter</em></a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </nav>
    <div style="clear:both;"></div>
</div>

CSS-code is:

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 10000;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease-in-out;
    height: auto;
    background-color:transparent;   
}
  • Ik heb het nog niet geprobeerd, nr.

 

One Reply
  1. 23
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 50) {
            $(".header").addClass("active");
        } else {
            //remove the background property so it comes transparent again (defined in your css)
           $(".header").removeClass("active");
        }
    });

    viool: http://jsfiddle.net/634d6vgq/2/

    Dit zal de background-color: #fff naar het element dat u als gebruiker heeft geschoven meer dan 50 pixels vanaf de bovenkant

    Dit zal het toevoegen van een class “active” zo kunt u de stijl van het in de css (makkelijker te onderhouden)

    edit:

    $(function() {
        $(window).on("scroll", function() {
            if($(window).scrollTop() > 50) {
                $(".header").addClass("active");
            } else {
                //remove the background property so it comes transparent again (defined in your css)
               $(".header").removeClass("active");
            }
        });
    });

    En je css:

    .active { background-color: #fff}

    Zorg ervoor dat u ook deze css-regel, orherwise de achtergrond kleur niet zal veranderen

    • Plaats dit script in de onderkant van de pagina om ervoor te zorgen dat de elementen worden geladen. Heb je een klasse gemaakt in je css waar u de stijl van de actieve kop? (Bijvoorbeeld: .active {background-color: #fff}) als je niet voeg dit kleine code en als het niet werkt dan zie bewerken
    • het enige probleem wat ik nu heb is dat ik echt zou willen hebben witte nav tekst op transparante achtergrond en grijze tekst op een witte achtergrond als geschoven. Denkt u dat u kan helpen? @sakesalverda
    • .header {color:#fff;background-color:transparent;} en .header.active {color:#777;background-color:#fff} en als mijn antwoord u geholpen geef mijn antwoorden, dus de discussie is gesloten

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *