引导导航栏飞效果

我想实现一个像一个这里演示的效果： 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属性来达到相同的效果吗？

来源

2015-05-04 Jacek Pawelec

你使用jQuery和jQueryUI吗？这个只使用Bootstrap和jQuery的例子可能有所帮助：http://bootply.com/JsVw8y6nYP – ZimSystem

-1

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

来源

2015-05-29 14:31:39

谢谢，这是问题！ –

引导导航栏飞效果

回答

相关问题