0

ここでプレゼンテーション用のプロトタイプを作成しようとしています。

私はそれが次のように機能することを望みます:

  • ビューポートの高さが 900px 未満の場合、固定位置のフッターがページのベースに添付されます。

    • ページのスクロール位置が特定のしきい値を超えると、このフッターは非表示になります

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

背景画像でこれをプロトタイプしています。私は基本的に、iOS の連絡先アプリに表示されていることを実行しようとしています (表示している文字は、スクロールして上に移動するまで固執します)。ブラウザでこれを行った人はいますか？

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

4

1 に答える 1

0

これを試して

$(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
   }
});
于 2011-07-25T17:06:16.860 に答える