Toggle CSS-Eigenschaft auf Bildlauf

Question

Ich versuche derzeit, eine CSS-Eigenschaft zu einem Div hinzuzufügen, wenn der Benutzer eine bestimmte Strecke nach unten auf der Seite gescrollt hat.

<div id="navbar">...</div> 

#navbar { 
    position: fixed; 
    width: 100%; 
    height: 55px; 
    padding: 1px; 
    padding-left: 20px; 
    background: #009688; 
} 

Ich möchte box-shadow: 0px 3px 2px #888888; Eigenschaft auf die CSS für #navbar hinzuzufügen, wenn der Benutzer 209px auf der Seite gescrollt hat. Ich habe versucht, dies bereits mit jQuery, das ich online gefunden habe, zusammenzusetzen, aber da ich fast keine Erfahrung mit jQuery habe, konnte ich es nicht zum Laufen bringen.

$("#navbar").css("box-shadow", "0px 3px 2px #888888"); 

Und:

$(document).scroll(function() { 
    $('#navbar').toggle($(this).scrollTop()>209) 
});​ 

Ich hoffe, dass ich einen Sinn habe. Vielen Dank im Voraus für jede Hilfe.

Answer 1

Erstellen Sie eine andere Klasse in Ihrem CSS und schalten Sie es mit Javascript.

CSS:

.navbar-scrolled { box-shadow: 0px 3px 2px #888888; }

Javascript:

$(document).scroll(function() { $("#navbar").toggleClass("navbar-scrolled", $(document).scrollTop() >= 209); });

Snippet unten:

$(document).scroll(function() { 
 
    $("#navbar").toggleClass("navbar-scrolled", $(document).scrollTop() >= 209); 
 
});

#navbar { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 55px; 
 
    padding: 1px; 
 
    padding-left: 20px; 
 
    background: #009688; 
 
} 
 
.navbar-scrolled { 
 
    box-shadow: 0px 3px 2px #888888; 
 
} 
 
#page-filler { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="navbar">navbar</div> 
 
<div id="page-filler"></div>