6

ウェイポイントを使用してページを下にスクロールするスティッキー div を作成するページに取り組んでいます position: fixed で、親 div の下部に到達します。$.waypoints('refresh') が呼び出されるまで、使用しているコードは意図したとおりに機能し、スティッキー div はページの上部に戻り、固定位置を失います。

コードは次のとおりです。

$('#content').waypoint(function(event, direction){
if (direction === 'down') {
    $(this).removeClass('sticky').addClass('bottomed');
}
else {
    $(this).removeClass('bottomed').addClass('sticky');
}
}, {
    offset: function() {
    return $('#leftCol').outerHeight() - $('#content').outerHeight();
}

}).find('#leftCol').waypoint(function(event, direction) {
    $(this).parent().toggleClass('sticky', direction === "down");
    event.stopPropagation();
         });

#leftCol はページを下にスクロールする div であり、#content はその親 div です。

私が持っているcssは次のとおりです。

#content {
width: 975px;
height: auto;
position: relative;
margin-top: 10px;
margin-bottom: 20px;
min-height: 800px;
}

#leftCol {
position: absolute;
width: 974px;
}

.sticky #leftCol {
position:fixed !important;
top:0 !important;
left: 50% !important;
width: 974px !important;
margin-left: -488px;
}

.bottomed #leftCol {
position: absolute !important;
bottom: 0px;
}

$.waypoints('refresh') が呼び出されたときに #leftCol の位置を維持する方法についてのアイデアは大歓迎です。

ありがとう

4

1 に答える 1

23

fixedウェイポイントとして位置要素を使用しないでください。GitHub で次のクローズ済みの問題をすべて参照してください: #64、#44、#32、#26、#24、#13、#10、#4。

これは、Waypoint について最も誤解されがちなことであり、Waypoint がどのようにうまく機能するかを十分に伝えていないのは完全に私のせいです。プラグインの次の反復で、これをより明確にする予定です。

疑問に思っている人のために: ウェイポイントは、要素のページ オフセットを調べることで機能します。しかし、固定位置要素のページ オフセットは、ユーザーがスクロールすると常に変化します。そのため、手動で、別のウェイポイントを追加するか、ブラウザーのサイズを変更することによって、refresh が呼び出されるたびに、そのウェイポイントの場所は、ユーザーがその時点でページをスクロールしている場所に一致するように変更されます。必要なのは、ドキュメント フローをウェイポイントにしない通常の静的な位置要素です。Waypoints プロジェクト サイトで示した例では、ウェイポイントは所定の位置に留まるラッパー要素ですが、navゲインをラップし、CSS を介して固定位置を失います。ページ オフセットと CSS を理解していない人にとっては、OP がここで行ったことを直感的に実行するのは非常に簡単です。繰り返しますが、これは将来のドキュメント/例でより直接的に対処されるものです。

于 2012-05-04T11:32:02.763 に答える