Question

我在<section>

中有三张图片

<section class="one">
          <img src="one.png" />
        </section>

        <section class="two">
          <img src="two.png" />
        </section>

        <section class="three">
          <img src="three.png" />
        </section>

我添加了一些css来定位各个部分：

$('.one').css({
      position:'absolute',
      top:100
    });
    $('.two').css({
      position:'absolute',
      top:800
    });

    $('.three').css({
      position:'absolute',
      top:1600
    });

我的问题在于js - 我想动态定位每个元素，例如第一部分是前100px，第一部分是200px，第三部分是300px。这是我到目前为止所管理的：

    $.fn.inView = function(){
    var win = $(window);
    obj = $(this);
    var scrollPosition = win.scrollTop();
    var visibleArea = win.scrollTop() + win.height();
    var objEndPos = (obj.offset().top + obj.outerHeight());
    var visible =(visibleArea >= objEndPos && scrollPosition <= objEndPos);
    $.each( obj, function( index ) {
        if(visible){
            //console.log(index);
            $(obj).css({
                position:'fixed',
                top: index*100//Problem here

            }); 
        }
    });
};

Answer 1

您遇到的主要问题是您设置了obj jquery选择器的css，而不是img选择器中的obj。为了获得img元素，您可以使用$(this)中的任何一个，或者在$.each内的回调函数中添加第二个参数，这是当前元素：

$.each(obj, function(index, el) {
    $(el).css

这是一个完整的代码段：

$(function() {
  obj = $('section img');
  $.each(obj, function(index) {
    $(this).css({
      position:'fixed',
      top: index*100
    });
  });
});

section img {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}
section.one img {
  border-color: red;
}
section.two img {
  border-color: green;
}
section.three img {
  border-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="one">
  <img src="one.png" alt="one"/>
</section>
<section class="two">
  <img src="two.png" alt="two" />
</section>

<section class="three">
  <img src="three.png" alt="three" />
</section>

动态定位元素-jQuery

1 个答案: