Как адаптировать прокрутку jQuery слушателей к CSS медиа-запросам? (Javascript / jQuery / Bootstrap) - PullRequest
Новая
       12

Как адаптировать прокрутку jQuery слушателей к CSS медиа-запросам? (Javascript / jQuery / Bootstrap)

0 голосов
/ 21 января 2020

Я новичок во всем этом; поэтому в течение прошедшего дня я пытался заставить jQuery функционировать. У меня есть панель навигации (панель навигации), которая меняет цвет фона / цвет из-за позиции прокрутки, это делается с помощью jQuery. Я эффективно работаю с шириной рабочего стола (1350 пикселей), но попытка манипулирования медиазапросами и прослушивателями jQuery кажется невозможной. Я применил все, что нашел, и перепробовал все дважды, но безрезультатно.

HTML

Панель навигации HTML довольно проста c Bootstrap, панель навигации просто изменяется из-за jQuery (позиция прокрутки ) 

</head>
 <body>
  <nav class="navbar sticky-top navbar-expand-sm">
        <a class="navbar-title" href="#aboutUs-box">counterCarbon</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
            <span class="navbar-toggler-icon"><i class="fas fa-bars"></i><span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav align-items-end">
                <li class="nav-item">
                    <a class="nav-link active" href="#navLink1">Emissions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#navLink2">Comparisons</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#navLink3">Partners</a>
                </li>
            </ul>
        </div>
    </nav>

CSS

Единственная интересная часть CSS - это видимые / скрытые изменения, я полагаю. 

.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity .35s linear, color .5s; 
}
.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility .50s, opacity .50s linear, color .5s;
}

jQuery

Все изменения осуществляются с помощью jQuery, навигационная панель должна изменять перемещение одинаково только в разных положениях прокрутки в зависимости от разная ширина / используемое устройство. Важно, что я не могу заставить программу распознавать три отдельных ($ (window) .width ()) блока (ie, все три раздела), распознать один легко. Но, похоже, запутаться с двумя и тремя совершенно невозможно. 


$(document).ready(function(){ 
            var scroll_pos = 0;

            $(document).scroll(function() { 
                scroll_pos = $(this).scrollTop(); 


                {if(($(window).width() >= 1350 && scroll_pos > 50)) {
                    $("nav").removeClass("visible").addClass("hidden");
                    $("nav a").removeClass("visible").addClass("hidden");
                    $("nav span").removeClass("visible").addClass("hidden");

                } 
                if(($(window).width() >= 1350 && scroll_pos > 690)) {
                    $("nav").removeClass("hidden").addClass("visible");
                    $("nav a").removeClass("hidden").addClass("visible");
                    $("nav span").removeClass("hidden").addClass("visible");
                    $("nav").css('background-color', '#fafafa');

                    $("nav a").css('color', '#404040');
                    $('nav span').css('color','#404040');
                }
                else {
                    $("nav").css('background-color', 'transparent');
                    $("nav a").css('color', '#fafafa');
                    $("nav span").css('color', '#fafafa');
                }
                if(($(window).width() >= 1350 && scroll_pos > 1270)) {
                    $("nav a").css('color', '#33adff');
                    $("nav span").css('color', '#33adff');
                }
                if(($(window).width() >= 1350 && scroll_pos > 1290)) {
                    $("nav").css('background-color', '#fafafa');
                }

                if(($(window).width() >= 1350 && scroll_pos < 50)) {
                    $("nav").css('background-color', 'transparent');
                    $("nav a").css('color', '#fafafa');
                    $('nav span').css('color','#fafafa');
                    $("nav").removeClass("hidden").addClass("visible");
                    $("nav a").removeClass("hidden").addClass("visible");
                    $("nav span").removeClass("hidden").addClass("visible");
                }}





                if(($(window).width() >= 1020 && scroll_pos > 45)) {
                    $("nav").removeClass("visible").addClass("hidden");
                    $("nav a").removeClass("visible").addClass("hidden");
                    $("nav span").removeClass("visible").addClass("hidden");

                } 
                if(($(window).width() >= 1020 && scroll_pos > 650)) {
                    $("nav").removeClass("hidden").addClass("visible");
                    $("nav a").removeClass("hidden").addClass("visible");
                    $("nav span").removeClass("hidden").addClass("visible");
                    $("nav").css('background-color', '#fafafa');

                    $("nav a").css('color', '#404040');
                    $('nav span').css('color','#404040');
                }
                else {
                    $("nav").css('background-color', 'transparent');
                    $("nav a").css('color', '#fafafa');
                    $("nav span").css('color', '#fafafa');
                }
                if(($(window).width() >= 1020 && scroll_pos > 1220)) {
                    $("nav a").css('color', '#33adff');
                    $("nav span").css('color', '#33adff');
                }
                if(($(window).width() >= 1020 && scroll_pos > 1245)) {
                    $("nav").css('background-color', '#fafafa');
                }

                if(($(window).width() >= 1020 && scroll_pos < 45)) {
                    $("nav").css('background-color', 'transparent');
                    $("nav a").css('color', '#fafafa');
                    $('nav span').css('color','#fafafa');
                    $("nav").removeClass("hidden").addClass("visible");
                    $("nav a").removeClass("hidden").addClass("visible");
                    $("nav span").removeClass("hidden").addClass("visible");
                }




                {if(($(window).width() >= 750 && scroll_pos > 40)) {
                    $("nav").removeClass("visible").addClass("hidden");
                    $("nav a").removeClass("visible").addClass("hidden");
                    $("nav span").removeClass("visible").addClass("hidden");

                } 
                if(($(window).width() >= 750 && scroll_pos > 620)) {
                    $("nav").removeClass("hidden").addClass("visible");
                    $("nav a").removeClass("hidden").addClass("visible");
                    $("nav span").removeClass("hidden").addClass("visible");
                    $("nav").css('background-color', '#fafafa');

                    $("nav a").css('color', '#404040');
                    $('nav span').css('color','#404040');
                }
                else {
                    $("nav").css('background-color', 'transparent');
                    $("nav a").css('color', '#fafafa');
                    $("nav span").css('color', '#fafafa');
                }
                if(($(window).width() >= 750 && scroll_pos > 1200)) {
                    $("nav a").css('color', '#33adff');
                    $("nav span").css('color', '#33adff');
                }
                if(($(window).width() >= 750 && scroll_pos > 1220)) {
                    $("nav").css('background-color', '#fafafa');
                }

                if(($(window).width() >= 750 && scroll_pos < 40)) {
                    $("nav").css('background-color', 'transparent');
                    $("nav a").css('color', '#fafafa');
                    $('nav span').css('color','#fafafa');
                    $("nav").removeClass("hidden").addClass("visible");
                    $("nav a").removeClass("hidden").addClass("visible");
                    $("nav span").removeClass("hidden").addClass("visible");
                }}
            });
        });
        ```

1 Ответ

1 голос
/ 21 января 2020

Мне было немного трудно понять, какие интервалы вы хотели, поэтому я добавил несколько комментариев, чтобы помочь вам достичь того, что вы хотели, если это не так, как есть. Кроме того, я объединил структуры ifs, чтобы не переоценивать выражение бесполезно. 

$(document).ready(function () {
    var scroll_pos = 0;

    $(document).scroll(function () {
        scroll_pos = $(this).scrollTop();
        var width = $(window).width();


        if (width >= 1350) {

            // ALL WHAT FOLLOW IMPLIES THAT width >= 1350

            // (1) : This overrides (2) because 
            if (scroll_pos <= 50) { // Range [0,50]
                $("nav").css('background-color', 'transparent');
                $("nav a").css('color', '#fafafa');
                $('nav span').css('color', '#fafafa');
                $("nav").removeClass("hidden").addClass("visible");
                $("nav a").removeClass("hidden").addClass("visible");
                $("nav span").removeClass("hidden").addClass("visible");
            }


            if (scroll_pos > 50) { // RANGE [50,+∝]

                $("nav").removeClass("visible").addClass("hidden");
                $("nav a").removeClass("visible").addClass("hidden");
                $("nav span").removeClass("visible").addClass("hidden");
            }

            if (scroll_pos > 690) { // [689,∝]
                $("nav").removeClass("hidden").addClass("visible");
                $("nav a").removeClass("hidden").addClass("visible");
                $("nav span").removeClass("hidden").addClass("visible");
                $("nav").css('background-color', '#fafafa');

                $("nav a").css('color', '#404040');
                $('nav span').css('color', '#404040');
            }

            /** 
             * 
             * (2)
             * THIS IS NEVER "VISIBILY EXECUTED"  : SEE (1)
             * 
             * YOU HAVE WRITTEN :

            else {
                $("nav").css('background-color', 'transparent');
                $("nav a").css('color', '#fafafa');
                $("nav span").css('color', '#fafafa');
            }

            **/

            if (scroll_pos > 1270) { // [1270,+∝]
                $("nav a").css('color', '#33adff');
                $("nav span").css('color', '#33adff');
            }

            /**
             * 
             * NOTE THAT IF SCROLL_POS > 1970 EVERYTHING ABOVE WOULD BE EXECUTED SO YOU WOULD HAVE A COMBINATION 
             * THIS IS BECAUSE 1970 > 690 > 50 SO EVERYTHING ABOVE IS TRUE
             * IF YOU WANT TO MAKE CLOSED INTERVALS PLEASE TRY PUTTING THE HIGHEST VALUE OF scroll_pos AT BEGINNING AND USING ELSE IF
             */

        }



        if (width >= 1020) {

            if (scroll_pos >= 45) {
                $("nav").removeClass("visible").addClass("hidden");
                $("nav a").removeClass("visible").addClass("hidden");
                $("nav span").removeClass("visible").addClass("hidden");
            }

            if (scroll_pos > 650) {
                $("nav").removeClass("hidden").addClass("visible");
                $("nav a").removeClass("hidden").addClass("visible");
                $("nav span").removeClass("hidden").addClass("visible");
                $("nav").css('background-color', '#fafafa');

                $("nav a").css('color', '#404040');
                $('nav span').css('color', '#404040');
            } else { // RANGE [0,620]
                $("nav").css('background-color', 'transparent');
                $("nav a").css('color', '#fafafa');
                $("nav span").css('color', '#fafafa');
            }

            if (scroll_pos > 1220) {
                $("nav a").css('color', '#33adff');
                $("nav span").css('color', '#33adff');
            }
            if (scroll_pos > 1245) {
                $("nav").css('background-color', '#fafafa');
            }

            if (scroll_pos < 45) {
                $("nav").css('background-color', 'transparent');
                $("nav a").css('color', '#fafafa');
                $('nav span').css('color', '#fafafa');
                $("nav").removeClass("hidden").addClass("visible");
                $("nav a").removeClass("hidden").addClass("visible");
                $("nav span").removeClass("hidden").addClass("visible");
            }

        }

        if (width >= 750) {
            if (scroll_pos > 40) {
                $("nav").removeClass("visible").addClass("hidden");
                $("nav a").removeClass("visible").addClass("hidden");
                $("nav span").removeClass("visible").addClass("hidden");

            }

            if (scroll_pos > 620) {
                $("nav").removeClass("hidden").addClass("visible");
                $("nav a").removeClass("hidden").addClass("visible");
                $("nav span").removeClass("hidden").addClass("visible");
                $("nav").css('background-color', '#fafafa');

                $("nav a").css('color', '#404040');
                $('nav span').css('color', '#404040');
            } else { // RANGE [0,620]
                $("nav").css('background-color', 'transparent');
                $("nav a").css('color', '#fafafa');
                $("nav span").css('color', '#fafafa');
            }
            if (scroll_pos > 1200) {
                $("nav a").css('color', '#33adff');
                $("nav span").css('color', '#33adff');
            }
            if (scroll_pos > 1220) {
                $("nav").css('background-color', '#fafafa');
            }

            if (scroll_pos < 40) {
                $("nav").css('background-color', 'transparent');
                $("nav a").css('color', '#fafafa');
                $('nav span').css('color', '#fafafa');
                $("nav").removeClass("hidden").addClass("visible");
                $("nav a").removeClass("hidden").addClass("visible");
                $("nav span").removeClass("hidden").addClass("visible");
            }
        }
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...