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

Question

[AnnaRoxy]

Как сделать такое меню навигации из этого примера?
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');
        }
    });

Answer 1

[Alexey10]

Вот написал лучший вариант https://jsfiddle.net/evr3s2bc/ ;

Answer 2

[lamer350]

if($(this).scrollTop() >= $(window).height()) {
а лучше оформляйте пост через песочницу

и в css еще надо добавить:
.navigation.navigation-fixed {
bottom: auto;
}

Answer 3

[Ао]

Зачем стока js городить ?
https://www.w3schools.com/howto/howto_css_sticky_e...

div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}

Comments

[Alexey10]

Мужик, кроссбраузерность никто не отменял =)

[Ао]

Alexey10, Нуда правильно, продолжайте потакать говнобраузерам и тем кому в падлу обновиться до актуальных версий и городить кучу не нужного кода и тратить своё видимо дешёвое время

[Alexey10]

Ао, Что значит потакать? Есть тз, по нему и делаем проект. Была бы моя воля, я бы верстал под хром и все