引導導航欄飛效果

我想實現一個像一個這裏演示的效果： 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

謝謝，這是問題！ –

引導導航欄飛效果

回答

相關問題