Блог

Я использую Bootstrap и Jquery Transit для преобразования моей панели навигации, когда она достигает определенной точки прокрутки. Теперь, когда у меня есть только часть в операторе if, она работает нормально, но я хочу, чтобы она переходила обратно, когда пользователь прокручивает вверх. Проблема в том, что, как только я добавляю часть else, ни один из переходов не работает. Когда я обновляю строку ниже строки bottomof_karussel, панель навигации «появляется» в режиме преобразования. Есть идеи?

Вот «рабочая» скрипка https://jsfiddle.net/zy6o57un/9 /

  $(window).scroll(function () {
            var bottom_of_screen = $(window).scrollTop()   $(window).innerHeight();
            var top_of_screen = $(window).scrollTop();
            /**Navbar transition**/
            //#region navbartransition
            if(top_of_screen > bottom_of_Karussel){
                //Logo
                $('.navbar-dark .navbar-brand').transition({color: '#cd212a', duration: '1200'});
                //Background
                $('nav').transition({backgroundColor: '#f4f5f0', duration: '1200'/*, border: '2px', borderColor: '#cd212a'*/});
                //active Link
                $('.navbar-dark .navbar-nav .nav-link.active').transition({color: '#cd212a', duration: '1200'});
                 //active Link
                $('.navbar-dark .navbar-nav .show > .nav-link').transition({color: '#cd212a', duration: '1200'});
                //inactive Links
                $('.navbar-dark .navbar-nav .nav-link').transition({color: '#e89a9f;', duration: '1200'});                    
            }
            else{
              /*  //Logo
                $('.navbar-dark .navbar-brand').transition({color: '#f4f5f0', duration: '1200'});
                //background
                $('nav').transition({backgroundColor: '#cd212a', duration: '1200'});
                //active Link
                $('.navbar-dark .navbar-nav .nav-link.active').transition({color: '#f4f5f0', duration: '1200'});
                 //active Link
                $('.navbar-dark .navbar-nav .show > .nav-link').transition({color: '#f4f5f0', duration: '1200'});
                //inactive Links
                $('.navbar-dark .navbar-nav .nav-link').transition({color: '#e89a9f;', duration: '1200'});   
                */
            }