StickyJS - Zwei klebrige Elemente, wie man die Breite von nur einem "stecken gebliebenen" div ändert

Question

Ich habe ein tumblr Thema (der Code ist reines css, html und js, keine tumblr Elemente) und ich habe eine Navigationsleiste (grün) und ein Ladensymbol (schwarz). Ich möchte, dass beide beim Scrollen oben auf der Seite bleiben, aber ich möchte, dass das Shop-Symbol seine Höhe so ändert, dass sie der Höhe der Navigationsleiste entspricht, während sie festsitzt.

Die Navigationsleiste funktioniert jetzt gut, aber wieder möchte ich die Breite des Shop-Symbols ändern. Auch wenn das Shop-Symbol festsitzt, bewegt es sich mehr nach links und ändert leicht die Breite, aber selbst wenn ich keine Stlyes hinzufüge, tut es dies immer noch.

Das Skript Ich verwende ist von stickyjs.com

<script type="text/javascript" src="http://static.tumblr.com/zvesamf/5veoajatd/jquery.sticky.js"></script> 
<script> 
    $(window).load(function(){ 
     $(".navigation").sticky({ topSpacing: 0 }); 
     $(".shop").sticky({ topSpacing: 0, className: '.sticky' }); 
    }); 
    </script> 

Die HMTL

ist

<div class="navigation"> 
    <div class="navigationwrap"> 
    <a href="#">link</a> 
    <a href="#">link</a> 
    <a href="#">link</a> 
    <a href="#">link</a> 
    </div> 
</div> 

<div class="shop"> 

</div> 

und die CSS ist

.navigation { 
    float:left; 
    width:840px; 
    height:42px; 
    background:green; 
    text-align:center; 
} 

.navigation.sticky { 

    max-width:900px; 
    width:900px; 
} 


.shop { 
    float:right; 
    margin-top:-58px; 
    margin-left:-50px; 
    width:226px; 
    height:207px; 
    background:black; 
} 

.shop.sticky { 
    float:right; 
    margin-top:-58px; 
    margin-left:-50px; 
    width:226px; 
    height:42px; 
    background:white; 
} 

Die Github mit Optionen hier sind https://github.com/garand/sticky

Ich habe versucht, die Standardvariablen, aber es ändert die Abmessungen der Navigationsleiste anstelle des Shop-Symbols.

Answer 1

Es gibt Ereignisse, die als sticky-start und sticky-end bezeichnet werden. Es ist möglicherweise nicht der beste Weg, dies wird jedoch in diesem Fall den Trick tun.

$('.shop').on('sticky-start', function() { $(this).addClass('sticky') }); 
$('.shop').on('sticky-end', function() { $(this).removeClass('sticky') });