Question

我的页面上有很多照片。当用户向下滚动到每个图像时，我想做一些javascript和PHP处理。我想出了以下内容：

$(window).scroll(function(){
    hT = $('.Picture-1A:eq(3)').offset().top,
    hH = $('.Picture-1A:eq(3)').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
    if ((wS >= (hT+hH-wH))){
        alert('you have scrolled to the h1!');
    }
});

上述示例仅在我到达某个图像时才有效。当滚动到达图像时我想做点什么。我希望在PHP中使用AJAX获取它的ID和进程。

我们假设以下是图像：

<div class="Picture-1A"></div>
<div class="Picture-1A"></div>
<div class="Picture-1A"></div>

我想要做的是为窗口上显示的图像添加1次展示。每当用户向下滚动页面时，我都希望使用AJAX。

就是这样

更新感谢Eugenio Enko，我找到了一个很棒的图书馆。以下是它的完成方式：

在jQuery之后将库代码包含在项目中：

如果您想要触发每张图片，请按以下方式使用：

   $('.Picture-1A').each(function() {
      $(this).waypoint(function(direction){
          alert($(this).html());
      });
   });

但是我无法使用$(".Picture-1A").html()获取this的html，而是返回undefiend

Answer 1

我知道有两个图书馆可以帮助你：

http://imakewebthings.com/waypoints/

http://scrollmagic.io/

第二个更完整，有更多选择，但是对于你需要的东西，似乎航点应该运作得很好。

最好的问候。

Answer 2

您可以在此处查看使用旧航点的示例：

http://codepen.io/eugenioenko/pen/qZMqOW

$(document).ready(function(){
   $('.spfx-scroll-p').waypoint(function(){
      alert('scrolled');
    },{offset:'90%'});
});

当滚动到内容或内容出现在窗口时，如何做某事？

2 个答案: