要素の位置を取得するscrollTop

Question

私はウィンドウscrollTop上にいくつかの要素を表示したい1ページレイアウトを持っていますが、要素位置の計算に問題があります。 ここでは私がやっていることがありますが、私は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); 
     } 
    }); 
    });