左のウェルにコンテンツがあり、右のウェルに画像またはその他のコンテンツのブロックがある html レイアウトがあります。ユーザーがスクロールし、右側のコンテンツのブロックが画面の上部に到達すると、ある時点で位置が固定に変更されます。親要素の下部に到達すると、位置が絶対位置に変わり、親要素とともに画面からスクロールします。
私は現在これをここに設定しています: http://jsfiddle.net/jdhancock88/6hLJF/、私のjavascript/jqueryは次のとおりです:
$(document).ready(function() {
var offset = $('.rightWellContainer').offset(); /*gets top and left position of the div containing the image*/
$(window).scroll(function() {
var scrollTop = $(window).scrollTop() +20; /*sets variable for the top of the window scroll, plus 20 (for the items's padding) */
var specialHeight = $('.special .leftWell').height(); /*gets the height of the row containing the element */
var imageHeight = $('.imageContainer img').height(); /*gets the height of the element */
var mark = (offset.top +specialHeight - imageHeight); /*sets the mark at which the element should top scrolling and switch to position absolute by adding the element's start position (offset.top), to the row's height (specialHeight), minus the height of the object (right4Height)*/
/* when the top of the object is less than the top of the window's scroll AND the object hasn't reached the bottom of the row (mark > scrollTop), add fixed class to freeze object in scroll */
if (offset.top < scrollTop && mark > scrollTop) {
$('.rightWellContainer').addClass('fixed');
$('.rightWellContainer').css('top', 20);
}
/*remove the fixed class when the object should scroll with it's row */
else {
$('.rightWellContainer').removeClass('fixed');
$('.rightWellContainer').css('top', 0);
}
/*if the top of the object hits the point (mark) where it's at the end of it's row as it scrolls off the window, add position absolute so the object scrolls up with the bottom of its row */
if (scrollTop >= mark) {
console.log("You hit the mark");
$('.rightWellContainer').addClass('bottom');
$('.rightWellContainer').css('top', specialHeight - imageHeight);
}
/*if the object has the absolute positioning on it already and falls back past the top of the window (scrollTop), place it back fixed within it's row by removing the class "bottom"*/
if (scrollTop < mark && $('.rightWellContainer').hasClass('bottom')) {
$('.rightWellContainer').removeClass('bottom');
}
});
});
私が疑問に思っているのは、同じ動作を持つ別の親 div に適切なコンテンツの 2 番目の部分を追加したい場合、現在の javascript/jquery をどのように設定して、その動作を適切なコンテンツの各部分に独立して適用するかです。他人？