1

Facebookの新しいタイムライン機能に感銘を受けました。特に、プロファイルを下にスクロールすると、タイムラインを表示したり、詳細情報を表示したりするためのオプションを提供する小さなメニューが表示されます。このdivは、ページの特定の長さまでスクロールダウンした場合にのみ表示され、次に上にスクロールすると、iは再び消えます。

私はプロジェクトを構築していますが、この種のシステムはプロジェクトに大きなメリットをもたらします。長いFAQページがあり、画面の左側にFAQのメニューを表示して、ユーザーがアコーディオンシステムを使用してユーザーはFAQタイトルをクリックして、コンテンツを表示します。

しかし、それが何と呼ばれているのか、そしてそれをどのように構築するのかはわかりません。誰かがこのようなものを作ったことがありますか？

4

3 に答える 3

0

私が探していたのは「スティッキーdiv」と呼ばれる答えを見つけました。私は最初にStackoverflowでこの投稿を見つけました。その後、このWebサイトにアクセスして、概念を説明し、コードを提供しました。

そのコードを使用して、必要なものを提供するためにそれをいじくり回しました。だから私はHTMLに入れました：

<div id="quicknav" style="display:none;">
    <p>Navigation!</p>
</div>

そしてJQueryでは：

function sticky_relocate() {
  var window_top = $(window).scrollTop();

  var div_top = $('#faq').offset().top;

  if (window_top > div_top)
    $('#quicknav').show()
  else
    $('#quicknav').hide();
  }

  // If you have jQuery directly, use the following line, instead
  $(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
  });

このコードにより、Facebookタイムライン風のdivが作成され、満足しています。

于 2012-04-26T11:18:20.040 に答える
0

質問のリストを含むFAQページの例（非常に基本的なもの）を作成しました。下にスクロールすると、100ピクセル後に、ページの上部に項目が表示されます：http: //jsfiddle.net/LKqwY/

$(function() {
    $(window).scroll(function() {
       if($(this).scrollTop() > 100) {
            $('#menu').fadeIn();
        } else {
            $('#menu').fadeOut();
        }
    });
});​

スクロールするたびに下にスクロールした距離をチェックするだけで、100ピクセルを超えると、メニューがフェードインします。上に戻ってページの上部に100ピクセル以上近づくと、再びフェードアウトします。

于 2012-04-26T11:18:55.067 に答える
-1

ボタンをクリックした場合は、表示するデータをロードする必要があります。その後、ページ上でjqueryを使用して下にスクロールできます。$('html, body').animate({scrollTop:1056}, 'slow',function(){ alert('scrolling is done');});

私はこのページでそれを実装しました：http：//greenpark.shoplupe.com/

ソースコードを見てください。showBlogEntry（id）という関数があります。

于 2012-04-26T10:48:24.793 に答える