Bootstrap Navbar летать эффект

Question

Я пытаюсь добиться эффекта, как тот, здесь было показано: http://templateocean.com/stamp/image-bg/1-home-style-one/index.html

навигационной панель летит после прокрутки в определенное положение.

Я использовал этот скрипт в качестве основы:

//jQuery to collapse the navbar on scroll 
$(window).scroll(function() { 
    if ($(".navbar").offset().top > 50) { 
     $(".navbar-fixed-top").addClass("top-nav-collapse"); 
    } else { 
     $(".navbar-fixed-top").removeClass("top-nav-collapse"); 
    } 
}); 

CSS:

@media(min-width:767px) { 
    .navbar { 
     padding: 20px 0; 
     -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; 
     -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; 
     transition: background .5s ease-in-out,padding .5s ease-in-out; 
     /* display: none;*/ 
    } 

    .top-nav-collapse { 
     padding: 0; 
     display: block; 
    } 
} 

Это изменяет высоту NavBar. Я играл с параметром «display:», и он работает до некоторой степени; однако навигатор появлялся без хорошего эффекта слайда.

Я пытался использовать этот скрипт: https://api.jqueryui.com/slide-effect/

поэтому я изменил первоначальный код:

(window).scroll(function() { 
    if ($(".navbar").offset().top > 50) { 
     $("#navbar-top").toggle("slide"); 
    } else { 
     $("#navbar-top").toggle("slide"); 
    } 
}); 

Теперь, однако, я получаю следующее сообщение об ошибке:

Uncaught TypeError: Failed to execute 'scroll' on 'Window': 2 arguments required, but only 1 present.custom.js:22 (anonymous function)

Что я делаю неправильно? Должен ли я действительно использовать JS для эффекта слайда? Могу ли я использовать некоторые другие атрибуты CSS для достижения такого же эффекта?

Answer 1

Убедитесь, что вы загрузили jquery перед другими скриптами js.