スクロールダウン後にナビゲーションがフェードインしますか？

Question

私は、まさにこのウェブサイトのようなナビゲーションを取得したいと思います：http://www.interviewmagazine.com/

ナビゲーションバーはとても約700ピクセルをスクロールダウンするか、後に表示されます。..効果フェードインとその固定NAVとは、あなたがスクロールフェードアウト効果を持っていますトップに戻る。

私は彼らのコードをどのように見ましたが、私はそれを理解できませんでした。

mootools thoのような音ですか？

誰かがそれが素晴らしいと助けることができる場合。ありがとう！

Answer 1

Twitter's Bootstrapを試すことができます。 2番目のツールバーを確認してください。

Answer 2

あなたは、必要に応じてクラスをスワッピング、jQueryとCSSを使用してこのようなメニューを作成することができます：あなたが設定する必要があります一定量

animate({opacity : 1.0}, 'fast', function() { 
    //callback; 
}); 

に高さを変更する

var posit = window.scrollTop(); 
if (posit == [your designated fadein location]) { 
    //do something; 
} 

CSS: position : fixed, opacity : 0, height : 0; overflow : hidden 

スワップクラスユーザーがスクロールしたときのリスナーが表示されますが、これは開始する必要があります。必要なのは、jQueryとブラウザ、プロジェクトを管理可能な部分に分割する論理的なアプローチ、そして時間です。

EDIT：あなたのフィドルです。多くのTwitterのスクロールスパイのような - -

http://jsfiddle.net/lazerblade01/fNn7K/26/

Answer 3

デビッド・ウォルシュは、彼がScrollSpyを呼び出す事を持っている唯一のことは、さまざまなことを行います。

このツイッターは、関心のある特定の要素に反応することがあります。

walshのプラグインは、ユーザーが特定のしきい値までスクロールして戻ったときにイベントを返すことができます。 stackoverflowのを検索する人のための

http://davidwalsh.name/mootools-scrollspy

Answer 4

ここに私の試みです：how can I stick the div after scrolling down a little

：ここ

$(function(){ 
    // Check the initial Poistion of Sticky Header 
    var stickyHeaderTop = $('#stickyheader').offset().top; 

    $(window).scroll(function(){ 
      if($(window).scrollTop() > stickyHeaderTop) { 
        $('#stickyheader').css({position: 'fixed', top: '0px'}); 
        $('#stickyheader').css('opacity', '1'); 
      } else { 
        $('#stickyheader').css({position: 'static', top: '600px'}); 
        $('#stickyheader').css('opacity', '0'); 
      } 
    }); 
}); 

は、それは、このコードを少し変更したバージョンであるフィドルのDEMOhttp://jsfiddle.net/uFq2k/297/

です