Bootstrap导航栏实际飞行

时间:2015-05-04 10:25:17

标签: javascript jquery css twitter-bootstrap twitter-bootstrap-3

我正在尝试实现类似于此处演示的效果: 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");
    }
});

但是,现在我收到以下错误:

  

未捕获的TypeError:无法在'Window'上执行'scroll':2   需要参数,但只有1个present.custom.js:22(匿名   功能)

我做错了什么?我是否必须真正使用JS来实现幻灯片效果?我可以使用其他一些CSS属性来达到同样的效果吗?

1 个答案:

答案 0 :(得分:0)

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