Bootstrap 导航栏飞起来了

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;
    }
}

这会更改导航栏的高度。我试过 '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

确保在其他 js 脚本之前加载 jquery。

Bootstrap 导航栏飞起来了

Bootstrap navbar fly in effect

javascript

css

jquery

twitter-bootstrap

twitter-bootstrap-3