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基金会的粘性更改元素的滚动大小

回答

相关问题