Не работает position: sticky, почему?
Хочу, чтобы при прокрутке оставался только header__nav, а логотип скрывался. position: stiky почему-то не работает
<!DOCTYPE html> <html lang="ru"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <link rel="stylesheet" href="shapka.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> <title>test</title> </head> <body> <header class="col-12 d-xxl-flex d-xl-flex d-lg-block d-md-block d-block justify-content-center"> <div class="header__padding d-xxl-flex d-xl-flex d-lg-block d-md-block d-block justify-content-center col-xxl-9 col-xl-9 col-lg-10 col-md-11 col-11"> <div class="header__img order-1 col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-12 d-flex justify-content-left"> <img class=""src="картинка.png" alt="Логотип"> </div> <div class="header__nav col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-12 order-2 d-xxl-flex d-xl-flex d-lg-flex d-md-flex d-none"> <nav class="d-flex col-12"> <button class="btn col-4 header__navlink">проекты</button> <button class="btn col-4 header__navlink">новости</button> <button class="btn col-4 header__navlink">компания</button> </nav> </div> <div class="header__navMenu d-xxl-none d-xl-none d-lg-none d-md-none d-flex" style="width: 100vw;"> <button class="btn btn-outline-light col-12" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Меню </button> </div> </div> <!-- <div class="collapse" id="collapseExample"> <div class="card card-body"> Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> --> </header> <div class="content bg-dark col-12" style="height: 150vh;"> </div> </body> </html> |
<!DOCTYPE html> <html lang="ru"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <link rel="stylesheet" href="shapka.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> <title>test</title> </head> <body> <header class="col-12 d-xxl-flex d-xl-flex d-lg-block d-md-block d-block justify-content-center"> <div class="header__padding d-xxl-flex d-xl-flex d-lg-block d-md-block d-block justify-content-center col-xxl-9 col-xl-9 col-lg-10 col-md-11 col-11"> <div class="header__img order-1 col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-12 d-flex justify-content-left"> <img class=""src="картинка.png" alt="Логотип"> </div> <div class="header__nav col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-12 order-2 d-xxl-flex d-xl-flex d-lg-flex d-md-flex d-none"> <nav class="d-flex col-12"> <button class="btn col-4 header__navlink">проекты</button> <button class="btn col-4 header__navlink">новости</button> <button class="btn col-4 header__navlink">компания</button> </nav> </div> <div class="header__navMenu d-xxl-none d-xl-none d-lg-none d-md-none d-flex" style="width: 100vw;"> <button class="btn btn-outline-light col-12" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Меню </button> </div> </div> <!-- <div class="collapse" id="collapseExample"> <div class="card card-body"> Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> --> </header> <div class="content bg-dark col-12" style="height: 150vh;"> </div> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;700;800;900&display=swap'); body{ padding: 0; margin: 0; color: white; font-family: 'Montserrat', sans-serif !important; } header{ background: linear-gradient(269deg, #181818 0%, #232323 100%); min-height: 10px; /* position: fixed; */ z-index: 999; max-width: 100vw; } .header__img{ vertical-align: middle; padding-top: 1%; } img{ object-fit: cover; width: 250px; height: 100px; margin: 0; } .header__nav{ position: sticky ; top: 0; } .header__navlink{ border-radius: 0 !important; border-bottom: 16px; height: 130px !important; margin-right: 5%; max-width: 33.333%; display: inline-block; color: rgb(199, 199, 199) !important; letter-spacing: 3px; font-weight: 700 !important; font-size: 35px !important; transition:1s all; } .header__navlink:hover{ background-color: rgb(52, 52, 52) !important; color: #dddddd; display: inline-block; } ul,li{ list-style-type: none; } |
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;700;800;900&display=swap'); body{ padding: 0; margin: 0; color: white; font-family: 'Montserrat', sans-serif !important; } header{ background: linear-gradient(269deg, #181818 0%, #232323 100%); min-height: 10px; /* position: fixed; */ z-index: 999; max-width: 100vw; } .header__img{ vertical-align: middle; padding-top: 1%; } img{ object-fit: cover; width: 250px; height: 100px; margin: 0; } .header__nav{ position: sticky ; top: 0; } .header__navlink{ border-radius: 0 !important; border-bottom: 16px; height: 130px !important; margin-right: 5%; max-width: 33.333%; display: inline-block; color: rgb(199, 199, 199) !important; letter-spacing: 3px; font-weight: 700 !important; font-size: 35px !important; transition:1s all; } .header__navlink:hover{ background-color: rgb(52, 52, 52) !important; color: #dddddd; display: inline-block; } ul,li{ list-style-type: none; }
Дополнительно:
если добавить верстку и стрили в codepen и привязать к вопросу - это уже половина решения
Ответы:
высота родительского контейнера должна быть больше размера элемента
иначе не будет полосы прокрутки, а элемент останется на своем месте и не будет прилипать
- всё уровнял до 130px, не помогает
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;700;800;900&display=swap'); body{ padding: 0; margin: 0; color: white; font-family: 'Montserrat', sans-serif !important; } header{ background: linear-gradient(269deg, #181818 0%, #232323 100%); height: 130px; /* position: fixed; */ z-index: 999; max-width: 100vw; } .header__img{ vertical-align: middle; padding-top: 1%; } img{ object-fit: cover; width: 250px; height: 100px; margin: 0; } .header__nav{ position: sticky !important; top: 0 !important ; height: 130px !important; } .header__navlink{ border-radius: 0 !important; border-bottom: 16px; height: 130px !important; margin-right: 5%; max-width: 33.333%; display: inline-block; color: rgb(199, 199, 199) !important; letter-spacing: 3px; font-weight: 700 !important; font-size: 35px !important; transition:1s all; } .header__navlink:hover{ background-color: rgb(52, 52, 52) !important; color: #dddddd; display: inline-block; } ul,li{ list-style-type: none; }
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;700;800;900&display=swap'); body{ padding: 0; margin: 0; color: white; font-family: 'Montserrat', sans-serif !important; } header{ background: linear-gradient(269deg, #181818 0%, #232323 100%); height: 130px; /* position: fixed; */ z-index: 999; max-width: 100vw; } .header__img{ vertical-align: middle; padding-top: 1%; } img{ object-fit: cover; width: 250px; height: 100px; margin: 0; } .header__nav{ position: sticky !important; top: 0 !important ; height: 130px !important; } .header__navlink{ border-radius: 0 !important; border-bottom: 16px; height: 130px !important; margin-right: 5%; max-width: 33.333%; display: inline-block; color: rgb(199, 199, 199) !important; letter-spacing: 3px; font-weight: 700 !important; font-size: 35px !important; transition:1s all; } .header__navlink:hover{ background-color: rgb(52, 52, 52) !important; color: #dddddd; display: inline-block; } ul,li{ list-style-type: none; }
- Кирилл, не туда прописал. Дописал в header и все заработало
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;700;800;900&display=swap'); body{ padding: 0; margin: 0; color: white; font-family: 'Montserrat', sans-serif !important; } header { height: 100px; position: sticky; top: 0; background: aquamarine; /* position: fixed; */ z-index: 999; max-width: 100vw; } .header__img{ vertical-align: middle; padding-top: 1%; } img{ object-fit: cover; width: 250px; height: 100px; margin: 0; } .header__nav{ position: sticky ; top: 0; } .header__navlink{ border-radius: 0; border-bottom: 16px; height: 130px ; margin-right: 5%; max-width: 33.333%; display: inline-block; color: rgb(199, 199, 199) ; letter-spacing: 3px; font-weight: 700 ; font-size: 35px ; transition:1s all; } .header__navlink:hover{ background-color: rgb(52, 52, 52); color: #dddddd; display: inline-block; } ul,li{ list-style-type: none; }
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;700;800;900&display=swap'); body{ padding: 0; margin: 0; color: white; font-family: 'Montserrat', sans-serif !important; } header { height: 100px; position: sticky; top: 0; background: aquamarine; /* position: fixed; */ z-index: 999; max-width: 100vw; } .header__img{ vertical-align: middle; padding-top: 1%; } img{ object-fit: cover; width: 250px; height: 100px; margin: 0; } .header__nav{ position: sticky ; top: 0; } .header__navlink{ border-radius: 0; border-bottom: 16px; height: 130px ; margin-right: 5%; max-width: 33.333%; display: inline-block; color: rgb(199, 199, 199) ; letter-spacing: 3px; font-weight: 700 ; font-size: 35px ; transition:1s all; } .header__navlink:hover{ background-color: rgb(52, 52, 52); color: #dddddd; display: inline-block; } ul,li{ list-style-type: none; }
- Совет: использовать !important в самых крайних случаях, когда код будет гигантский, то отлавливать перезаписи будет не так просто. А если еще и фреймворк типа Vue.js..)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с position: sticky может быть вызвана различными причинами, и важно убедиться, что вы правильно настроили свой CSS.
Во-первых, убедитесь, что вы правильно указали значение для свойства top, bottom, left или right в вашем CSS-коде. Например, если вы хотите, чтобы элемент оставался "липким" сверху страницы, убедитесь, что у него есть значение top: 0; Если значение не указано, он может не работать должным образом.
Во-вторых, убедитесь, что ваш элемент не находится в контейнере с overflow: hidden; Это может помешать правильному функционированию position: sticky.
Также стоит учитывать, что position: sticky не будет работать в старых версиях браузеров, таких как Internet Explorer 11. Если ваша целевая аудитория включает в себя пользователей с устаревшими браузерами, вам может потребоваться альтернативное решение.
Наконец, убедитесь, что ваш элемент имеет достаточно контента для прокрутки. Если контент слишком короткий, элемент не будет "липким", пока не будет прокручено достаточно контента.
Пример правильного использования position: sticky:
.sticky-element { position: -webkit-sticky; position: sticky; top: 0; background-color: #f1f1f1; padding: 50px; font-size: 20px; }
Если после проверки всех этих аспектов проблема все еще остается, попробуйте создать минимальный пример кода и разместить его на сайте для дальнейшего анализа и помощи от сообщества.