私はここからのスクロール効果複製しようとしています：http://www.enjin.com/forums/page/1/m/10826/viewthread/8514993-boot-strap-30-navbar-full-moduleと私に収まるように、それを変更した：http://www.altisliferpg.com/ブートストラップのナビゲーションバーを「折りたたむ」方法を教えてください。
を私は彼らが私はここから取られているブートストラップナビゲーションバー、の大きく変更されたバージョンを使用していることを感じています特定のケース。
ページを下にスクロールすると、上のバーが「小さく」なり、スクロールしながらページと共にスクロールします。ありがとう
あなたは、高さ、フォントサイズなど、変更したいものすべてについてCSS遷移を使用できます。次に、スクロールリスナーを設定するだけで、ヘッダーにクラスが追加され、サイズが変更されます。クイック（非常に醜い）例。 jsFiddle
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#header').addClass('small');
}
else {
$('#header').removeClass('small');
}
});
あなたは「簡単」と言いますが、どこに正確に入れていますか？ bootstrap.min.css？ – Nitro
あなたの質問が本当にわからないのですが、
はたぶん、あなたはその後、固定するためのナビゲーションバーの位置を設定して、アニメーションを実行し、ウィンドウのスクロールイベントを検出する必要があります。ここではjavascriptの一部の例だと、リンクがアクションでそれを参照してください。
$(function(){
var performingDownAnimation = false,
performingUpAnimation = false;
var performScroll = function(){
if($("body").scrollTop() > 0) {
if(performingUpAnimation) {
$('#logo').stop();
performingUpAnimation = false;
}
if(!performingDownAnimation){
$('#navbar').addClass('navbar-fixed');
$('#logo').animate({ 'font-size': "12px" }, 1000, function(){
performingDownAnimation = false;
});
performingDownAnimation = true;
}
}else if($("body").scrollTop() == 0){
if(performingDownAnimation) {
$('#logo').stop();
performingDownAnimation = false;
}
if(!performingUpAnimation){
$('#navbar').removeClass('navbar-fixed');
$('#logo').animate({ 'font-size': "48px" }, 1000, function(){
performingUpAnimation = false;
});
performingUpAnimation = true;
}
}
}
$(document).on('scroll', performScroll);
});
On scroll event and position fixed
私も「アップ」方向のサポートを追加するための私の応答を編集しました。ブートストラップは、アニメーションにどのように使うのかわかりません。ブートストラップは主にCSSクラスをさまざまな要素に適用することに基づいているため、できないと思います。 CSSクラスは離散ですが、font-sizeプロパティのように何か数値をアニメーション化するよう求めています。それと同じように、あなたは "互い違い"に見えるアニメーションを作成することができます。
bootstrap.min.css？あなたはそれをもっと小さいサイズにすることができますが、例のサイズよりも大きくすることができますか？バックアップを取ると、どうすればそれを大きくすることができますか？ – Nitro
私はちょっと役立つと思ういくつかのリンクを投稿します：http://callmenick.com/post/animated-resizing-header-on-scroll http://stackoverflow.com/questions/24765155/shrinking-ナビゲーションバーのスクロールダウン時のブートストラップ3 –
@HaroenViaeneありがとう、私はそれを見てみましょう。私はちょうどブートストラップ分、およびその他のファイルを変更するだけで、JS、CSSとここに記載されているものを編集するには：http://stackoverflow.com/questions/24765155/shrinking-navigation-bar-when-scrolling-down-bootstrap3 ？この男が使っているバーは何ですか？ http://www.guildcraft.org/ – Nitro