讓內容在向上滾動後可見

Question

我對Javascript非常陌生，我試圖實現的是僅當頁面滾動達到特定點（div #point）時才加載AJAX一些JS內容。一切工作正常，我的內容是在達到div＃點時加載的，但這裏有一個問題：當用戶滾動備份時，我希望我的加載內容保持靜止，我不想再次消失。您能否建議我採取一種方法來實現這一目標？

第二個問題：我如何添加一個偏移量來激活。在pagescroll接近#point div之前加載一堆像素？

下面是代碼：

<script type="text/javascript"> 
 
\t $(document).ready(function() { 
 
\t  var s = $("#point"); 
 
\t  var pos = s.position();     
 
\t  $(window).scroll(function() { 
 
\t   var windowpos = $(window).scrollTop(); 
 
\t   if (windowpos >= pos.top) { 
 
\t   \t $("#point").load("MYCONTENT.PHP"); 
 
\t   } 
 
\t  }); 
 
\t }); 
 
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="point"> 
 
</div>

謝謝！

Answer 1

你可以使用一個布爾值，檢查點已達到：

script type="text/javascript"> 
    $(document).ready(function() { 
     var reached = false; 
     var loaded = false; 
     var s = $("#point"); 
     var pos = s.position() - 10 ; //Additional pixels you mentioned.     
     $(window).scroll(function() { 
      var windowpos = $(window).scrollTop(); 
      if (windowpos >= pos.top) { 
       reached = true; 
      } 
      if(reached && !loaded){ 
       $("#point").load("MYCONTENT.PHP"); 
       loaded=true; 
      } 
     }); 

    }); 
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="point"> 
</div>