Как установить липкий заголовок Foundation 6 с холстом сверху? - PullRequest
Новая
       40

Как установить липкий заголовок Foundation 6 с холстом сверху?

0 голосов
/ 16 января 2020

Я пытаюсь заставить работать макет, который использует липкий заголовок вверху страницы И навигацию вне холста, которая открывается сверху. У меня проблема в том, что дизайн требует частично прозрачного заголовка. Когда навигация вне холста скользит вниз от верхней части окна браузера под меню, это видно под заголовком. Элемент off canvas должен выпадать снизу заголовка, а не верхней части окна браузера.

Как это возможно?

Перо здесь: https://codepen.io/sean-kimball/pen/MWYqYWY

    <div data-sticky-container>
        <header class="sticky" data-sticky data-margin-top="0" >
            <div class="grid-container">
                <div class="grid-x grid-padding-x">
                    <div class="cell">

                        <button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
                        <button class="close-button" aria-label="Close menu" type="button" data-close>
                          <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
            </div>
        </header>
    </div>



<div class="off-canvas-wrapper">

    <div class="off-canvas position-top" id="offCanvas" data-off-canvas >

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan erat nisl, tristique tincidunt neque laoreet vitae. </p>

    </div>


    <div class="off-canvas-content" data-off-canvas-content>        

        <div class="grid-container">

            <div class="grid-x grid-padding-x">

                <aside class="cell">

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan erat nisl, tristique tincidunt neque laoreet vitae. Nullam non risus mollis, consequat nibh et, condimentum orci. Nulla pellentesque quis sem vel euismod. Quisque laoreet scelerisque erat quis ullamcorper. Morbi dolor enim, vestibulum at consectetur sit amet, lacinia id tortor. Nullam rutrum venenatis odio sit amet aliquam. Phasellus eleifend nunc turpis, quis viverra sapien interdum id.</p>

                </section>                      

            </div>

        </div>



    </div>

</div>
...