Javascript 如何将jquery设置的行为应用于具有相同类但不同控制变量值的多个元素

我有一个html布局，左边有一口内容井，右边有一个图像或其他内容块。在某个时刻，当用户滚动，右井的内容块到达屏幕顶部时，它的位置会更改为固定。当它到达父元素的底部时，它的位置变为绝对位置，并与其父元素一起从屏幕上滚动

我目前在这里设置了以下内容：，其中我的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');
    }
});

$（文档）.ready（函数（）{
var offset=$（'.rightWellContainer'）。offset（）；/*获取包含图像的div的顶部和左侧位置*/
$（窗口）。滚动（函数（）{
var scrollTop=$（窗口）.scrollTop（）+20；/*设置窗口滚动顶部的变量，加上20（用于项目的填充）*/
var specialHeight=$（'.special.leftWell'）.height（）；/*获取包含元素的行的高度*/
var imageHeight=$（'.imageContainer img'）。height（）；/*获取元素的高度*/
var mark=（offset.top+specialHeight-imageHeight）；/*通过将元素的起始位置（offset.top）添加到行的高度（specialHeight）减去对象的高度（right4Height），设置元素应在其上滚动并切换到绝对位置的标记*/
/*当对象的顶部小于窗口滚动的顶部且对象尚未到达行的底部（标记>滚动顶部）时，添加固定类以冻结滚动中的对象*/
if（offset.topscrollTop）{
$（'.rightWellContainer'）.addClass（'fixed'）；
$（'.rightWellContainer'）.css（'top'，20）；
} 
/*当对象应与其行一起滚动时，移除固定类*/
否则{
$（'.rightWellContainer'）.removeClass（'fixed'）；
$（'.rightWellContainer'）.css（'top'，0）；
} 
/*如果对象滚动出窗口时，对象顶部碰到其所在行末尾的点（标记），请添加“绝对位置”，使对象与其所在行的底部一起向上滚动*/
如果（滚动顶部>=标记）{
log（“你击中了目标”）；
$（'.rightWellContainer'）.addClass（'bottom'）；
$（'.rightWellContainer'）.css（'top'，specialHeight-imageHeight）；
}
/*如果对象已经有了绝对位置，并且落回窗口顶部（scrollTop），则通过移除类“bottom”将其固定在其行内*/
if（scrollTop

}))

---

我想知道的是，如果我想在一个单独的父div中添加第二个具有相同行为的正确内容，我将如何设置我当前的javascript/jquery，以便将该行为独立于其他内容应用于每个正确内容？

为什么首先获得偏移量<代码>变量偏移量=$（'.rightWellContainer'）.offset（）。这不会因用户导航而改变！！这是为了能够使用offset.top（）值，该值在scrollTop和标记计算中进行检查。在您的示例中，我看不到左侧和右侧内容，每个内容都在彼此下方，而且我也看不到图像，请重新检查！在JSFIDLE中，左侧内容是拉丁文本，右侧内容/图像由红色框表示。当我点击JSFIDLE链接时看起来很好抱歉，在您的示例中我没有看到任何红色框！！