Размер элемента с липкими изменениями Zurb Foundation на прокрутке

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>