スクロールで全幅divが消える

Question

私がしようとしていることは次のとおりです。ウェブサイトのイントロとしてフルサイズの画像を作成してから、ユーザーがスクロールすると画像がゆっくりとスライドします。私はすでにすべてのことをやっているのですが、私の質問はそれだけです。そこでここでは、スクロールダウンがアクティブになるたび、JavaScriptコード

<script type="text/javascript"> 
    (function() { 
     var introEl = $('div.intro'), //where intro is the full width div 
      introHeadingH = introEl.find('h1').height(), 
      windowH = $(window).height(); 

     introEl.css('padding', (windowH - introHeadingH)/2 + 'px 0'); 

     $(document).on('scroll', function() { 
      introEl.slideUp(1000, function() { $(document).off('scroll'); }); 
     }); 


    })(); 
</script> 

その方法

だ、画像は「slideUp」ではなく「1000」ミリ秒の制限を進めます。私はまだjavascriptに慣れていないので、ユーザーがスクロールを完了したときにのみイメージが完全に消えるように助けを求めています。ここに例があります： http://hightidenyc.com もしあなたがそれが必要だと言うなら、残りのコードを投稿することができますが、私はそれがちょうどjavascriptのケースだと思うので、みなさんありがとう!!

///更新/// だから私はつもりは将来のためにここに@bfmagsの助けを借りて作られた作品は https://jsfiddle.net/flavioneto/13b1oktL/1/ を研究しましょうよ、それは、バックグラウンド・アタッチメント」も追加されました。スクロールにはよりクールな効果を与えるために固定されています。例の

Answer 1

彼らはただ画像が

$(window).scroll(function() { 

     windowH = $(window).height(); 
     if ($(this).scrollTop()>windowH) 
     { 
      $('div.intro').remove(); 
      $(window).scrollTop(0); 
     } 
    }); 

をスクロールアウトされた後、あなたはまた、noneに表示スタイルを変更したり、スタイルにdiv要素のCSSクラスをしませ変えることができるヘッダーdiv要素を削除しています

*あなたの応答のために、本当に感謝して、ちょっと@op_exchangerコードhttps://jsfiddle.net/yekL3xjq/1/