Zurb Foundation's Sticky ändert Elementgröße auf Scroll

Question

Ich habe ein Element in der Seitenleiste Ich möchte "klebrig" machen, wie im Beispiel auf der Zurb Website here.

Es funktioniert, aber wenn ich nach unten scrolle, schrumpft das klebrige Element in der Breite (siehe Screenshots unten).

Ich kann nicht sagen, warum das ist. Mein Code ist wie folgt:

<div class="columns medium-4 medium-push-8 sticky-container" data-sticky-container> 
    <div class="sticky" data-sticky data-margin-top="0"> 
      <!---CONTENT---> 
    </div> 
</div> 

Es gibt keine externen Stile, die das Element beeinflussen.

Hier ist ein gif der Frage, die ich zu sehen bin:

Answer 1

Das ist, was passiert, wenn das Element von einem normalen Block-Level-Elemente geht (die so breit wie das übergeordnete Element sein wird) zu position: fixed; . Das Element wird nur so groß wie der Inhalt darin ohne anders definierte Breiten.

Eine einfache Lösung ist die Zuweisung width: 100%;. Oder Sie können immer genug Inhalt in das Div einfügen, so dass der Inhalt es so breit wie es ist, wenn es nicht angebracht ist.

Siehe mein Referenzbeispiel. Dies ist mit width: 100%; definiert. Entfernen Sie width: 100%;, und entfernen Sie den Kommentar aus dem langen Absatz, um das alternative Update zu sehen.

$(document).foundation();

body { 
 
    height: 500vh; 
 
} 
 

 
.sticky { 
 
    border: 1px solid black; 
 
    width: 100%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.js"></script> 
 

 
<div class="columns medium-4 medium-push-8 sticky-container" data-sticky-container> 
 
    <div class="sticky" data-sticky data-margin-top="0"> 
 
    <p>asdf</p> 
 
    <!--<p>asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf </p>--> 
 
    </div> 
 
</div>