Zurb Foundation的Sticky改变了元素在滚动上的大小

Question

我在侧栏中有一个元素，我想让它变成“粘性”，就像Zurb网站here上的例子一样。

它可以工作，但是当我向下滚动粘性元素时，宽度会缩小（参见下面的屏幕截图）。

我不知道为什么会这样。我的代码如下：

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

Answer 1

当元素从普通块级元素（与父元素一样宽）到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>