javascript - 找出两个元素的开始之间有多少像素？

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 中有没有一种方法可以找出 的 start 之间的像素数量# members 元素和.members-head 元素的start？

Answer 1

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>