0

過去 48 時間、これを解決しようとしてきましたが、実際には解決策が見つかりません。https://github.com/bigspotteddog/ScrollToFixedプラグインを使用しており、親 DIV 内の固定位置を制限したいと考えています。stackoverflow とプロジェクトの github ページで scrollToFixed に関するすべての関連する質問を見ましたが、これを解決する手がかりは見つかりませんでした。

これまでのところ、私はこれを持っています: http://jsfiddle.net/CVMjp/1/

これは基本的な HTML 構造です。

<div class="container" id="element_1">
  <div class="content">Content</div>
  <div class="sticky">Sticky</div>
</div>

そして、これはページ上の各要素に影響を与える私のjQuery関数になります:

$(document).ready(function() {
for (i = 1; i <= $('.sticky').length; i++) {

    $('#element_' + i + ' .sticky').scrollToFixed({
        marginTop: 20, 
                  zIndex:1,
                  limit: $('#element_' + (i + 1) + ' .content').offset().top - $('#element_' + i + ' .sticky').height() - 50
    });
}       
});

.sticky ボックスが各 .content の下部に到達したときにその下部にとどまるようにします。現在、私の例では、.content DIV の下部に到達すると、「固定」位置が「絶対」に変更されますが、ボディ マージンに問題があります (ボディに基づいて「左」位置があるため)。 .content 内の左の位置ではなく) およびその他の問題があり、問題の原因を実際に見つけることができません。

また、jsfiddle の例では$(document).readyに問題はありませんが、私のオンライン サイトでは$(window).loadを使用して、各 .content DIVの正しいoffset().topを取得する必要がありました。document.ready を使用すると、明らかにすべての .content DIV が同じ高さのように扱われますが、内部のコンテンツの量が異なるため異なります。

これを解決できる場合は、この質問を更新しますが、助けを借りることができます。

前もって感謝します！:)

4

1 に答える 1

1

少し異なるアプローチが必要です。

最初.stickyはコンテナに入れる必要があります。display: table次に、withとのようなレイアウトテーブルを作成しますdisplay: table-cell。両方と同じ高さtable-layout: fixedを保つのに役立ちます。これがフィドルです、サー。.sidebar.content

ただし、制限があります。たとえばposition: relative、bodyタグでのみ使用できます。

offset().topこの問題に関しては、waitForImagesプラグインを使用して、自分だけに適用することができます.content。しかし、より良い解決策を知りません。

于 2013-01-11T14:06:49.010 に答える