CSS заголовок прокрутки с помощью навигационной панели? - PullRequest
Новая
       6

CSS заголовок прокрутки с помощью навигационной панели?

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

Я пытаюсь, чтобы мой заголовок плавал выше моего navbar, когда пользователь прокручивает страницу вниз. Я попытался использовать top: 0;, но это просто дало мне следующее:

enter image description here

У меня есть CSS ниже 

        .header {
            overflow: hidden;
            padding: 20px;
            text-align: center;
            background: #1abc9c;
            color: white;
            position: sticky;
            position: -webkit-sticky;
            top: 0;

        }

        .header h1 {
            font-size: 40px;
        }

        .navbar {
            overflow: hidden;
            background-color: #333;
            position: sticky;
            position: -webkit-sticky;
            top: 0;
        }

        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }



        .navbar a.right {
            float: right;


        }


        .navbar a:hover {
            background-color: #ddd;
            color: pink;
        }


        .navbar a.active {
            background-color: #666;
            color: white;

        }

Также некоторые HTML: 


        <div class="header">
        <button type="button" class="button" onclick="Iknownothing()">Click Me!</button>
            <h3>Title</h3>

        </div>

1 Ответ

1 голос
/ 01 марта 2020

Мой совет - добавить padding-top к текстовому элементу заголовка 

.header {
        padding-top:*amount of padding you want maybe in percent or px or rem*;
        overflow: hidden;
        padding: 20px;
        text-align: center;
        background: #1abc9c;
        color: white;
        position: sticky;
        position: -webkit-sticky;
        top: 0;

    }
...