Zurb Foundation Sticky 在滚动时更改元素的大小

Question

我想在边栏中创建一个元素 'sticky'，就像 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>

Zurb Foundation Sticky 在滚动时更改元素的大小

Zurb Foundation's Sticky changes element's size on scroll

css

zurb-foundation