Задать вопрос
zenithxxl
@zenithxxl
Веб-разработчик

Не работает 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>

@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;
}
  • Вопрос задан
  • 188 просмотров
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 1
@artbutko
Web Developer
высота родительского контейнера должна быть больше размера элемента
иначе не будет полосы прокрутки, а элемент останется на своем месте и не будет прилипать
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы