Основа: липкое боковое меню - PullRequest
Новая
       7

Основа: липкое боковое меню

0 голосов
/ 25 февраля 2019

Я пытаюсь создать макет с липкой строкой заголовка и липким правым меню, которое находится прямо под строкой заголовка и слева от области содержимого.Ниже приведена моя попытка, которая приводит к тому, что боковое меню-аккордеон (заполнитель) отображается в неправильном положении.

Я только что использовал CSS по умолчанию и т. Д. Из новой установки Foundation для сайтов (6.5.3).

Почему мое меню (заполнитель) не остается в положении при прокрутке?

https://codepen.io/anon/pen/xBKaLq

    <div data-sticky-container id="header">
        <div class="top-bar" data-sticky data-margin-top="0">
            <div class="top-bar-left">
                <h3>Cool page title</h3>
            </div>
            <div class="top-bar-right">John Doe <a href="">Logout</a></div>
        </div>
    </div>

    <div class="grid-x">

        <div class="cell medium-3 show-for-medium" data-sticky-container>
            <div class="sticky" data-sticky data-top-anchor="header:bottom">
                <h3>Menu placeholder</h3>
            </div>
        </div>

        <div class="cell medium-9">
            <h1>
                Start content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
            </h1>
        </div>

    </div>

1 Ответ

0 голосов
/ 26 февраля 2019

Закрепление двух липких компонентов, один за другим, будет проблемой.Вместо этого вы можете использовать пример из базовых документов, который очень похож.

https://foundation.zurb.com/sites/docs/

Верхняя точка закреплена в обычном положении, а тело дополняется, чтобы освободить место для навигации.. 

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
 }

Вот ваш пример таким образом: https://codepen.io/rafibomb/pen/BbyRav

...