找出两个元素的起始点之间有多少个像素？

Question

考虑下面的HTML：

<div id="members" class="main">  
    <section class="top"> 
     <!-- Other Content --> 
    </section> 
    <section class="listing"> 
     <div class="holder container"> 
      <div class="row"> 
       <div class="members-main col-sm-12"> 
        <div class="members-head row"> 

        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
</div> 

是否有JavaScript或jQuery的方式，我可以找出像素的开始#members元素和开始.members-head元素之间的金额是多少？

Answer 1

尝试

$('.members-head').offset().top - $('#members').offset().top 

Jquery offset

如果你有内部#members一个多.members-head元素（我怀疑），你可以尝试$('.members-head:first')，或循环通过他们与.each做$(this).offset().top - $('#members').offset().top

Answer 2

试试这个 你会得到。

$('#members').offset().top - $('.members-head').offset().top 

Answer 3

offset().top给你最高的位置元素的重刑。

var distance = $('.members-head').offset().top - $('#members').offset().top; 
 

 
alert("Distance is : " + distance)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="members" class="main">  
 
    <section class="top"> 
 
     Other Content 
 
    </section> 
 
    <section class="listing"> 
 
     <div class="holder container"> 
 
      <div class="row"> 
 
       <div class="members-main col-sm-12"> 
 
        <div class="members-head row"> 
 
         fdgfdgfdgdfgdfs 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section> 
 
</div>