Jqueryがアンカーポイントに達したときにCSSを編集するときの変更方法を教えてください。

Question

アンカーポイントに達すると、このJqueryがCSSを変更することが判明しました。

$(window).on("scroll", function() { 
    var scrollPosition = scrollY || pageYOffset; 

    if (scrollPosition > $("#someAnchor").position().top - $(window).height()) { 
     alert("run code here"); 
    } 
}); 

問題は、画面の下部には、アンカーポイントに到達したが、上部がアンカーポイントをタッチすると、それはコードを実行する必要があるとき、それはそうです。これはどうすればいいですか？

Answer 1

削除：

var ranOffsetCode = false 

$(window).on("scroll", function() { 

    var docScrollTop = $(document).scrollTop(); // Figure out how far we scrolled. 
    var someAnchorTop = $('#someAnchor').offset().top - $('#someAnchor').height(); // Figure out how far down the element is on the page 

    if (docScrollTop >= someAnchorTop) { // If we scrolled up to or past the element, fire this 
    if (ranOffsetCode === false) { // This makes sure we only run the function once and not every scroll 
     ranOffsetCode = true; 
     console.log('run code here'); // Functional code to execute after we scrolled down this far. 
    } 
    } 
    else { 
    ranOffsetCode = false; 
    } 

}); 

Demo

Answer 2

単にこれがあなたのためによく働くことを望ん- $(window).height()

$(window).on("scroll", function() { var scrollPosition = scrollY || pageYOffset; 

if (scrollPosition > $("#someAnchor").position().top) { alert("run code here"); } }); 

Answer 3

は本当に答えを意味するものではないが、それが役立つかもしれない：

var spam = false; 
$(window).on("scroll", function() { 
    var scrollPosition = scrollY || pageYOffset; 

    $('#pos').html('y: '+scrollY+', a: '+$("#someAnchor").position().top + ', p: '+scrollPosition); 
    if (!spam && (scrollPosition > $("#someAnchor").position().top)) { 
     alert('hit it!'); 
     spam = true; 
    } 
}); 

を

一部のHTML：

<div style="position:fixed; top:0; left:85%; width:15%; height:20px"> 
<span id="pos" style="font-family:Courier; font-size:0.5em; white-space:pre"></span> 
</div>