Позиция элементы dynamically- JQuery

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

Основная проблема у вас есть то, что вы установили CSS селектора obj Jquery, а не на 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>