Question

我对Javascript很新，我想要实现的是只在页面滚动到达某个点（div #point）时才加载AJAX一些JS内容。一切正常，我的内容是在达到div #point时加载的，但这里有一个问题：当用户向上滚动时，我希望我加载的内容保持不变，我不想再次消失。你能告诉我一个实现这个目标的方法吗？

还有第二个问题：如何在pagescroll接近#point div之前添加偏移以激活.load一堆像素？

以下是代码：

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

向上滚动后保持内容加载可见

1 个答案: