获取元素位置滚动顶部

Question

我有一个单页布局，我想在窗口scrollTop上显示几个元素，但是我在计算元素位置时遇到问题。 这是我正在做的事情，但我的 scrollTop 为负值，我不知道为什么。

var myEl = $('.myElement').offset().top; 
var currPos = ( myEl - $(window).scrollTop() ); 
$(window).scroll(function(){
var wScrollTop = $(window).scrollTop();

if (wScrollTop > currPos) {
alert("reached");
myEl.fadeIn(2000);
}
});

body {
background-color: red;
height: 3000px;
}
.myElement {
color: #fff;
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Some othe content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto ullam minima, veniam, maiores molestiae assumenda pariatur corrupti voluptatum id ea commodi aperiam dignissimos fuga, exercitationem illo eius praesentium suscipit. Velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto ullam minima, veniam, maiores molestiae assumenda pariatur corrupti voluptatum id ea commodi aperiam dignissimos fuga, exercitationem illo eius praesentium suscipit. Velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto ullam minima, veniam, maiores molestiae assumenda pariatur corrupti voluptatum id ea commodi aperiam dignissimos fuga, exercitationem illo eius praesentium suscipit. Velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto ullam minima, veniam, maiores molestiae assumenda pariatur corrupti voluptatum id ea commodi aperiam dignissimos fuga, exercitationem illo eius praesentium suscipit. Velit.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto ullam minima, veniam, maiores molestiae assumenda pariatur corrupti voluptatum id ea commodi aperiam dignissimos fuga, exercitationem illo eius praesentium suscipit. Velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto ullam minima, veniam, maiores molestiae assumenda pariatur corrupti voluptatum id ea commodi aperiam dignissimos fuga, exercitationem illo eius praesentium suscipit. Velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto ullam minima, veniam, maiores molestiae assumenda pariatur corrupti voluptatum id ea commodi aperiam dignissimos fuga, exercitationem illo eius praesentium suscipit. Velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto ullam minima, veniam, maiores molestiae assumenda pariatur corrupti voluptatum id ea commodi aperiam dignissimos fuga, exercitationem illo eius praesentium suscipit. Velit.</p>
<div class="myElement">My Element</div>

我只想运行一次此代码，不像在我的示例中几次提醒该位置已达到。我也不确定是否计算我的元素的 currPos。任何建议，这是如何计算元素的当前位置的最佳方法，然后在窗口滚动顶部仅显示一次我想要的元素。

Answer 1

这是更新的脚本。

jQuery(document).ready(function() {
var myEl = jQuery('.myElement');
var myElem = myEl.offset().top-100;
$(window).scroll(function(){
var wScrollTop = $(window).scrollTop();
if (wScrollTop > myElem) {
myEl.fadeIn(2000);
} else {
myEl.fadeOut(2000);
}
});
});