Javascript 当用户滚动Jquery时触发Jquery_Javascript_Jquery_Html

Javascript 当用户滚动Jquery时触发Jquery

javascript jquery html

Javascript 当用户滚动Jquery时触发Jquery,javascript,jquery,html,Javascript,Jquery,Html,我想在用户第一次滚动div时触发JQuery事件我试过使用航路点。它不起作用。这是代码，它没有给出错误 var waypoints = $('#main').waypoint({ handler: function(direction) { alert("Main div"); } }) HTML代码： <body>  <div id="push"></div> <se

我想在用户第一次滚动div时触发JQuery事件

我试过使用航路点。它不起作用。这是代码，它没有给出错误

var waypoints = $('#main').waypoint({
  handler: function(direction) {
    alert("Main div");
  }
})

HTML代码：

<body>
  <!-- main content -->
  <div id="push"></div>
  <section class="grey darken-4 valign-wrapper">
    <div class="container valign">
      <div class="col s12">
        <h2 class="center-align white-text">Hey!</h2>
        <div class="divider"></div>
          <p class="center-align white-text flow-text developer"></p>
      </div>
    </div>
    </div>
  </section>




  <div id="main">
    <div class="container" style="padding-top:8px">
      <h2 class="center black-text darken-4">Profile</h2>
      <h4 class="center teal-text darken-4">
          I love to Code <a class="pulse btn-floating"><i class="material-icons">favorite</i></a>
        </h4>
      <div class="divider"></div>
      <div class="row" style="padding-top:5%">
        <div class="col s4">
          <h4 class=" teal-text darken-4">About me</h4>
          <p class="flow-text me" style="font-size:20px">

          </p>
        </div>
        <div class="col s4">
          <img src="Images/Aarth.jpg" alt="" class="circle responsive-img">
        </div>
        <div class="col s4">
          <h4 class="teal-text darken-4" style="padding-left:11%">Details</h4>
          <p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Name:</strong>
            <span class="name "></span>
          </p>
          <p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Age:</strong>
            <span class="age"></span>
          </p>
          <p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Location:</strong>
            <span class="location"></span>
          </p>
        </div>
      </div>
    </div>
  </div>

</body>

以下是我到目前为止一直使用的方法，但没有任何效果

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

帮帮忙太好了

要使用航路点，请记住需要有足够的滚动空间，以便主div的顶部到达视口的顶部。这取决于用户打开的浏览器窗口的大小。可以设置距视口顶部的%偏移，以在元素距顶部一定距离时触发该偏移

如果main div是最后一个元素，则当滚动到达页面底部时，即使main的顶部无法到达视口的顶部，也可以使用特殊的视图底部偏移使其工作：

var waypoints = $('#main').waypoint({
  handler: function(direction) {
    alert("Main div");
  },
  offset: "bottom-in-view"
});

文档中提供了所有这些信息。有关更多详细信息，请参见

，只要使用jQuery版本的航路点文件，就可以正常工作。请记住，主div的顶部需要有足够的滚动空间才能到达页面顶部。我使用的是3.2.1 jquery版本。足够让您能够滚动到div的顶部位于页面顶部。取决于页面上还有什么内容。如果希望向下触发偏移，也可以设置偏移。阅读我尝试过的文档。我相信你所说的问题是正确的。我已经更新了html，你能帮我一下吗？我之前试过上面的代码，但仍然没有启动。我想还有别的问题。我试着给出最小高度。但仍然没有运气，很难理解你做错了什么。在这里，它正在使用以下代码：。您是否确实包含了waypoints库的jQuery版本？对于不同的集成，它有不同的版本。文档中提到支持1.8.0+版本，我使用的是3.2.1。这是在主页面或加载的JS文件中根本没有航路点代码的页面。我上面粘贴的库或代码都不存在。所以我不确定给我看是什么意思？您似乎根本没有实现它，在这种情况下，它不起作用也就不足为奇了。它起作用了！我怎么会错过这个！谢谢！