Javascript 仅当节或在范围内时添加CSS

我试图制作一个“粘性”图像，其中所有类的图像.img“添加一个css属性，然后在它不在范围内时删除它

我通过获取每个图像的ID并将其传递给一个函数（addCSS）来实现这一点。它工作得很好-图像粘贴在应该平滑的地方，但是当我尝试向上滚动时，它们保持css。当wScroll超出范围时，我想删除CSS属性

$('.img').each(function () {
        var sectionOffset = $(this).offset().top;
        var attID = $(this).attr('id');attID = $("#"+attID.toString()+"");
        if (wScroll >= sectionOffset && wScroll <= (sectionOffset + sectionHeight)) {
            addCSS(attID);
        }
    });
function addCSS(element) {
        element.css({
            'position': 'fixed',
            'top': stickyPosition - 75,
            'left': OffsetLeft
        });
    }
function removeCSS(element) {
        element.css({
            'position': '',
            'top': '',
            'left': ''
        });
}

$（'.img'）。每个（函数（）{
var sectionOffset=$（this）.offset（）.top；
var attID=$（this.attr（'id'）；attID=$（“#”+attID.toString（）+”）；
如果（wScroll>=sectionOffset&&wScroll=sectionOffset&&wScroll（sectionOffset+sectionHeight）| wScroll

我在不使用数组的情况下成功地使它顺利工作，但是代码有点长，我希望在不丢失函数的情况下简化它

以下是一个简化版本： 为此，我只需要这些方块跳回原位。谢谢

试试这个：

// Last section and current section
var last_section = -1;
var current_section = -1;

// Scroll
jQuery(window).scroll(function(){

    // Get current section
    for (var i = 0; i < jQuery('.row').length; i++) {
        if (jQuery(this).scrollTop() >= jQuery('.row:eq('+i+')').position().top) {
            current_section = i;
        }
    }

    // If change
    if (current_section != last_section) {
        removeCSS(jQuery('.row:eq('+last_section+') .img'));
        addCSS(jQuery('.row:eq('+current_section+') .img'));
        last_section = current_section;
    }

});

//最后一节和当前节
var last_section=-1；
var电流_段=-1；
//卷轴
jQuery（窗口）.滚动（函数（）{
//获取当前节
for（var i=0；i=jQuery（'.row:eq（'+i+'）））.position（）.top）{
当前_段=i；
}
}
//如果改变
if（当前_段！=最后一个_段）{
removeCSS（jQuery（'.row:eq（'+last_section+'））.img'）；
addCSS（jQuery（'.row:eq（'+current_section+'）.img'）；
最后一段=当前段；
}
});

---

另一种方法，但没有全局变量，它依赖于显式设置的标识符

添加CSS:

.active {
  position: fixed;
  top: 100px;
  left: 100px;
}

JavaScript:

$(window).scroll(function() {
  var rows = $(".row");

  $(".img").each(function() {
    var row = false, i, l, id;

    for (i = 0, l = rows.length; i < l; i++) {
      id = "#" + this.id.toString();

      if ($(rows[i]).find(id)[0] != undefined) {
        row = rows[i];
        break;
      }
    }

    if (!row)
      return false;

    if ((window.scrollY >= $(row).offset().top) && (window.scrollY < $(row).offset().top + $(row).outerHeight()))
      $(this).addClass("active");
    else
      $(this).removeClass("active");
  });
});

$（窗口）。滚动（函数（）{
变量行=$（“.row”）；
$（“.img”）。每个（函数（）{
var row=false，i，l，id；
对于（i=0，l=rows.length；i=$（行）.offset（）.top）和&（window.scrollY<$（行）.offset（）.top+$（行）.outerHeight（））
$（此）.addClass（“活动”）；
其他的
$（此）.removeClass（“活动”）；
});
});

JSFiddle：

$(window).scroll(function() {
  var rows = $(".row");

  $(".img").each(function() {
    var row = false, i, l, id;

    for (i = 0, l = rows.length; i < l; i++) {
      id = "#" + this.id.toString();

      if ($(rows[i]).find(id)[0] != undefined) {
        row = rows[i];
        break;
      }
    }

    if (!row)
      return false;

    if ((window.scrollY >= $(row).offset().top) && (window.scrollY < $(row).offset().top + $(row).outerHeight()))
      $(this).addClass("active");
    else
      $(this).removeClass("active");
  });
});