@AnnaRoxy

Как сделать прилипшее меню после прохождения блока с высотой 100vh?

Как сделать такое меню навигации из этого примера?
yobithemes.com/demo/html/whoiam/white/index.html#

Меню должно прилипать после прохождения блока растянутого на всю высоту.

Высота первого блока растянута на всю высоту экрана (100vh), меню спозиционировано "absolute", но вот со скриптом пока не получается:
<header>
    <div class="navigation">
        <div class="hamburger">
            
        </div>
        <a class="v-admin-logo" href="#">
            <img src="image/v-admin-white.svg" alt="v-admin-logo">
        </a>
        <nav class="nav">
            <ul>
                <li><a class="nav__link nav__link_first active" href="#">Главная</a></li>
                <li><a class="nav__link" href="#1">Обо мне</a></li>
                <li><a class="nav__link" href="#2">Услуги</a></li>
                <!--<li><a class="nav__link v-admin-logo" href="#">V.admin</a></li>-->
                <li><a class="nav__link" href="#3">Резюме</a></li>
                <li><a class="nav__link" href="#4">Блог</a></li>
                <li><a class="nav__link" href="#5">Контакты</a></li>
            </ul>
        </nav>
        <div class="social">
            <a href="#" class="social__item"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social__item"><i class="fab fa-vk"></i></a>
            <a href="#" class="social__item"><i class="fab fa-twitter"></i></a>
            <a href="#" class="social__item"><i class="fab fa-linkedin-in"></i></a>
            <a href="#" class="social__item"><i class="fab fa-github"></i></a>

        </div>
    </div>
</header>


СSS:
.navigation {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 61px;
    background: white;
    border-bottom: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}
.navigation.navigation-fixed {
    position: fixed;
    top:0;
    z-index: 1000;
}

JS:
// Navigation
    $(window).scroll(function() {
        if($(this).scrollTop() >= 1000) {
            $('.navigation').addClass('navigation-fixed');
        }
        else{
            $('.navigation').removeClass('navigation-fixed');
        }
    });
  • Вопрос задан
  • 86 просмотров
Пригласить эксперта
Ответы на вопрос 2
lamer350
@lamer350
กำลังสูงสุด
if($(this).scrollTop() >= $(window).height()) {
а лучше оформляйте пост через песочницу

и в css еще надо добавить:
.navigation.navigation-fixed {
bottom: auto;
}
Ответ написан
@darknefrit
Зачем стока js городить ?
https://www.w3schools.com/howto/howto_css_sticky_e...

div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы