jQueryを使用して特定の高さがスクロールされた後にHTML要素を非表示にする

Question

私はプレゼンテーションのために何かをプロトタイプ化しようとしています。

私はそれがこのように動作したいと思います：

• ビューポートは背の高い未満900pxである場合にはページのベースに取り付けられた固定位置フッターがあります。

  • ページのスクロール位置が一定のしきい値を通過すると、このフッターの取得の隠された

• ビューポートが900pxよりも大きい場合には、これはそれだけで通常のページと同じように動作します...コンテンツの後にフッターが表示されます。

私はちょうど背景画像でこれを試作しています。私は本質的にあなたがiOSの連絡先アプリで見ていることをしようとしています（あなたがそれを過ぎてからそれが上に移動するまであなたが見ている文字はスティックです）。ブラウザでこれを行った人はいますか？

メディアクエリでビューポートサイズに基づいて固定フッタを表示/非表示できますが、スクロール位置で同じことを行う方法はわかりません。

Answer 1

は私が.scrollTop（）> scrollTopThresholdを得るわからないんだけど、この

$(window).scroll(function(){ 
    var $win = $(window); 
    var scrollTopThreshold = 200; 
    if($win.height() < 900){//first condition 
     //position the footer to the base of the page using css or jquery 
    } 
    else if($(document).scrollTop() > scrollTopThreshold){//second condition 
     //Hide the footer 
    } 
    else if($win.height() > 900){//thrid condition 
     //let footer appear at the bottom of the content 
    } 
});