Навбар не фиксируется в верхней части с Javascript

Question

Я строю веб-сайт и в начале имею навигационную панель внизу страницы. В то время как я прокручиваю, я хочу зафиксировать панель навигации вверху, чтобы она появлялась только тогда, когда я снова немного прокручиваю вверх. Я пытаюсь с помощью методов "addClass ()" и "removeClass ()" с Javascript, моя версия начальной загрузки 4.3.1.

Вот мой HTML-код:

         <nav class="navbar bg-inverse bg-dark navbar-full navbar-dark" 
        id="main-nav">
                <a class="navbar-brand" href="#">ONE<span class="bold- 
        green">TREE</span></a>
                <ul class="nav navbar-nav">

Вот мой код Javascript:

        $(document).ready(function() {

            $(window).scroll(function() {

                if ($(window).scrollTop() > 970) {
                    $('.navbar').addClass('fixed-top');
                }
                 if ($(window).scrollTop() > 971) {
                    $('.navbar').removeClass('fixed-top');
                }
            });


        });

Спасибо, любую информацию, которую я могу предоставить, пожалуйста, спросите

Answer 1

Попробуйте это:

let c, currentScrollTop = 0, navbar = $('.navbar');
$(window).scroll(function () {
    let a = $(window).scrollTop();
    let b = navbar.height();
    currentScrollTop = a;
    if (c < currentScrollTop && a > b + b) {
        navbar.removeClass("fixed-top");          
    } else if (c > currentScrollTop && !(a <= b)) {
        navbar.addClass("fixed-top");
    }
    c = currentScrollTop;
});

Answer 2

Судя по предоставленному коду, оба сравнения "больше чем", что означает, что класс с фиксированной вершиной будет применяться только между 970 и 971 пикселями.

    $(document).ready(function() {

        $(window).scroll(function() {

            if ($(window).scrollTop() < 970) {
                $('.navbar').addClass('fixed-top');
            }
             if ($(window).scrollTop() > 971) {
                $('.navbar').removeClass('fixed-top');
            }
        });


    });