Как зафиксировать навигационное меню?

Question

На моей странице html есть заголовок , в котором находится изображение и текст. Слева должно располагаться меню, а справа блок с текстом и фотографиями. Проблема в том, что не получается зафиксировать меню таким образом, чтобы при прокрутке оно не смещалось вверх, а оставалось всегда рядом с текстом, то есть чтобы блок справа можно было прокручивать вниз, но при этом меню всегда оставалось "замороженным" слева. (ЗАГОЛОВОК не должен фиксироваться). Прочла в интернете, что нужно к классу меню применить свойство sticky, но все равно не работает. Нужно изменить код и в других местах. Помогите, пожалуйста.

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .header_intro {
        display: block;
        width: 100%;
        background: url("http://www.lavanda.com.gt/media/port/portada3.jpg");
        background-position: center bottom;
    }

    .title_in_header {
        display: block;
        color: white;
        text-align: center;
        padding: 50px 0;
        font-size: 50px;
        font-family: cursive;
        letter-spacing: 5px;
    }

    .menu {
        display: inline-block;
        font-family: cursive;
        font-size: 1em;
        margin-left: 2%;
        position: sticky;
        top: 0;
    }

    ul {
        list-style: none;
    }

    .text {
        padding-top: 2%;
        width: 70%;
        text-align: left;
        font-family: cursive;
        font-size: 1.3em;
        display: block;
        float: right;
        border: 1px solid black;
    }
</style>

<body>

    <div class="header_intro">
        <div class="title_in_header">Природа Молдовы</div>
        </div>

    <div class="menu">
        <h1>Навигация по странице</h1>
        </br>
        <ul>
            <li><a href="#locations">Места для посещения</a></li>
            </br>
            <li>Интересные факты</li>
            </br>
            <li>Экскурсии</li>
            </br>
        </ul>
    </div>



    <div class="text">
        Туризм в Молдове старается предложить наиболее качественное обслуживание для людей.

        <p>Молдавия  привлекает туристов круглый год из разных уголков мира, предлагая различные достопримечательности.</p>

Answer 1

элементы с "липкой" позицией работают по другому - когда они доходят до нужной позиции - они фиксируются

у вас меню фиксируется в самом верху экрана

position: sticky;
top: 0;

И ваш код именно так и делает (проверил у себя)

Но как я понимаю вам нужен другой эффект?

Если я правильно вас понял, то возможно вам стоит по другому определить class = 'text':

для класса text задается высота

height: calc(100vh - 200px); // 200px - высота заголовка
теперь прокрутка будет только в блоке text, а все остальное будет фиксировано

БЛОГ НА HUSL

Как зафиксировать навигационное меню?

Ответы (1 шт):