Zurb基金會的粘性更改元素的滾動大小

我在側欄中有一個要粘貼的元素，就像Zurb網站here上的示例一樣。Zurb基金會的粘性更改元素的滾動大小

它可以工作，但是當我向下滾動sticky元素時會縮小寬度（請參見下面的截圖）。

我不知道這是爲什麼。我的代碼如下：

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

沒有外部樣式影響元素。

下面是我看到的問題的GIF：

來源

2017-01-23 MeltingDog

分享更多的代碼或鏈接到你面臨什麼樣的問題 –

也就是說當元素從一個正常的塊級元素（這將是一樣寬的父元素）去position: fixed;會發生什麼。元素只有變成與其內部的內容一樣大，沒有其他定義的寬度。

一個簡單的解決辦法是分配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>

來源

2017-01-23 04:17:14

Zurb基金會的粘性更改元素的滾動大小

回答

相關問題