3

google plus や facebook のようなレイアウトを作成する方法を教えてください。例としてgoogle plus homeで見ることができます、

最初はメインコンテンツでページをスクロールすると一緒にスクロールしますが(友達投稿とサイドバー)、サイドバーの一番下(友達投稿の右側)までスクロールするとそのサイドバーがスクロールしなくなりますが、別のコンテンツ (友達の投稿) は引き続きスクロールします。そのようなレイアウトを作成する方法を私に説明できますか? サンプル コードまたはデモは非常に役立ちます。

4

4 に答える 4

2

CSS を使用した固定配置は、非常に限定的なアプローチです。このスタイルの「固定」領域を実行する方法は多数ありますが、その多くは、ここで同様の質問に対する回答として既に提供されています (上の検索を試してみてください)。

1 つの手法 (多くが基づいている) は、(簡単に言えば) そのようなものです。

  1. ブラウザのスクロールをキャプチャする
  2. 選択した要素 (x) の上からの位置を取得します
  3. スクロール > x かどうかを確認します。そうであれば、要素にクラスを適用して特定の位置に固定します。

同じことが逆に機能します。たとえば、次のようになります。

var target = $('#div-to-stick');
var div_position = target.offset().top;

$(window).scroll(function() { 
    var y_position = $(window).scrollTop();
    if(y_position > div_position) {
        target.addClass('fixed');
    }
    else {
        target.removeClass('fixed');
    }
}

注:上記のコードを完成させるために選択した方法によっては、div の位置が変更されるとページが「ジャンプ」することがよくあります。これは常に (目立つ) 問題ではありませんが、target.height() で .before を使用し、同じ高さの「偽の」置換 div を追加することで、これを回避することを検討できます。

お役に立てれば。

于 2012-09-06T19:42:28.453 に答える
1

css3 の新しいアプローチは、労力を削減することです。単一のプロパティを使用して取得します。

position:sticky;

here はそれを説明した記事とデモです。

論文

デモ

于 2012-09-14T08:40:14.423 に答える
0

position:fixedCSS （スクロールサイドバー用）を探しています。場所はleft:[length]、right:[length]、top:[length]、bottom:[length]および通常の幅と高さの組み合わせで設定できます

ウィンドウがサイドバーの上部をスクロールした後にプロパティを適用するウィンドウresizeとscrollリスナーでそれを拡張する必要があります。position:fixed

于 2012-09-06T19:36:24.947 に答える