我有一个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中添加第二段正确的内容，我将如何设置当前的javascript / jquery以将该行为应用于每个权限内容独立于其他内容？