3

私はこの問題の解決策を見つけようと数時間頭と Google Fu を悩ませてきましたが、満足のいくものは何も思いつかないようです。

Bootstrap の "Affix" プラグインのように、いくつかの検索基準のためにページの横に要素を貼り付けたいと考えています。(デモはこちら)。問題は、要素がウィンドウよりもはるかに高いことが非常に一般的になることです。そのため、関連する要素自体のスクロールが発生します。

通常、これは問題にはなりません。ユーザーがドキュメントの上部と下部を押すと、固定要素の上部と下部が見えるからです。（ウィンドウを非常に短く縮小している間のブートストラップの例を参照してください）。ただし、結果セットで無限スクロールを使用することを計画しています。つまり、ヒットするボトムがないため、固定要素のボトムが表示されることはありません。ユーザーが下にスクロールすると、ユーザーがすべての条件を確認できるように下に固定する必要があり、上にスクロールするときに上に固定する必要があります。

そこで、Bootstrap のプラグインを変更することから始めました (実際には Bootstrap を使用していません)。ページを下にスクロールするのは簡単です。要素の下部に固定点を使用すると、要素の下部に到達するまで固定されません。

しかし、もう一度上にスクロールすると、問題が発生します。

ここで本当に明白で簡単なものが欠けていますか（結局のところ月曜日の朝です）、またはブートストラップの接辞へのプラグイン/パッチを知っている人はいますか？

TL;DR 非常に背の高い要素をページに貼り付けて、スクロールできるようにする必要があります。つまり、下に固定され、上にスクロールすると、要素は固定されていないため、上にスクロールされます。エレメントの上部がヒットしたら、そこで修正します。

4

1 に答える 1

0

これがやりたいことですかDEMO

役立つシンプルなjQuery関数。

$(function()
  {
 affix= $(".affix-top");
 var affixHeight = parseInt(affix.height());
 var affixTop    = parseInt(affix.offset().top);
 var affixBottom = parseInt(affixTop + affixHeight);

// Bind a scroll event for the whole page
$(document).bind("scroll", function(e) 
{
    // Calculate how far down the user has scrolled
    var screenBottom = parseInt($(window).height() +$(window).scrollTop()  );

    // Test if the div has been revealed
    if(screenBottom > affixBottom)
    {
      affix.attr("style","");
      affix.css({"bottom":"0px","position":"fixed"});
    }
   else
   {
    affix.attr("style","");
    affix.css({"top":"0px","position":"relative"});
   }
});

  });
于 2012-12-12T14:47:18.050 に答える