Question

我正在尝试创建一个“粘性”图像，其中类“.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').each(function () {
        var sectionOffset = $(this).offset().top;
        var attID = $(this).attr('id');attID = $("#"+attID.toString()+"");
        if (wScroll >= sectionOffset && wScroll <= (sectionOffset + sectionHeight)) {
            addCSS(attID);
        }
        else if (wScroll > (sectionOffset + sectionHeight) || wScroll < sectionOffset) {
            removeCSS(attID);
        }
    });

我设法让它在不使用数组的情况下顺利运行，但代码有点长，我希望在不丢失功能的情况下简化它。

以下是简化版：http://codepen.io/ebevers/pen/xwbdbP 为此，我只需要将方块跳回原位。谢谢！

Answer 1

试试这个：

// 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;
    }

});

<强> http://jsfiddle.net/c4z9satw/

Answer 2

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

添加了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");
  });
});

JSFiddle：http://jsfiddle.net/w7ru130s/2/

仅在某个部分或在范围内时添加CSS

2 个答案: