StickyJS: Wie kann CSS geändert werden, wenn das Element "sticky" ist?

Question

Ich benutze http://stickyjs.com/, um eine Social Share-Leiste oben auf meiner Website zu beheben.

Ich habe es wie beabsichtigt zu arbeiten diese Einbettung:

$(document).ready(function(){ 
 
    $("#sticker").sticky({topSpacing:0}) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.3/jquery.sticky.min.js"></script> 
 
<div id="sticker">Sticky</div>

Aber jetzt brauche ich den Anteil Balkenfarbe zu ändern, wenn die Bar ist „klebrig“: wenn das Element nicht klebrig ist , sollte es # 333 sein, und wenn es behoben ist, sollte es #FFF sein.

Ich habe versucht, die css für #sticker (das ist die ID für das Element sticky) zu ändern, und es hat offensichtlich die Farbe für beide klebrig und nicht-klebrig geändert.

Dann sah ich auf diese auf der GitHub-Seite für das Skript:

classname: (Standard: ‚ist klebrig‘) CSS-Klasse an den Wrapper des Elements hinzugefügt, wenn „geklebte“.

Sieht aus wie ich hier brauche, aber ich kann es nicht benutzen.

Irgendwelche Hilfe bitte?

Answer 1

Wie es die Klasse is-sticky zu Ihrem bestehenden Klasse hinzuzufügen haben Sie die CSS-Schlüsselwort verwenden !important den Hintergrund overide Sie bereits definiert:

.is-sticky { 
    background-color:#FFF !important; 
}