Zurb Foundationのスティッキーはスクロールで要素のサイズを変更します

Question

私はサイドバーに要素を持っています。Zurbサイトhereの例のように、「スティッキー」にしたいと思います。

スティッキー要素がスクロールダウンすると機能します（下のスクリーンショットを参照）。

これはなぜかわかりません。私のコードは以下の通りです：

要素に影響する外部スタイルはありません。ここで

は、私が見ています問題のGIFです：要素は position: fixed;に（親要素と同じ幅になります）、通常のブロックレベル要素からなるときに起こることです

Answer 1

。要素は、他に定義されていない幅がなければ、要素の内容と同じ大きさになります。

単純な修正はwidth: 100%;を割り当てることです。または、divにコンテンツを十分に配置して、コンテンツが添付されていないときと同じくらい広い範囲にプッシュするようにすることもできます。

参考までに参考にしてください。これはwidth: 100%;と定義されています。代替の修正を表示するには、width: 100%;を削除し、長い段落のコメントを外します。問題は、あなたが直面しているものに

$(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>