用户滚动浏览时触发Jquery

Question

I want to trigger a JQuery event when the user scrolls across a div for the firs time. 当用户在div时间内滚动div时，我想触发一个JQuery事件。

I have tried using waypoint. 我尝试使用航点。 It is not working. 它不起作用。 Here is the code, it gives no error. 这是代码，它没有错误。

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

HTML code: 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>

Here are the approaches I have used till now, but nothing worked 这是我到目前为止使用的方法，但是没有任何效果

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();

Help would be great! 帮助会很棒！

Answer 1

To use waypoints, bear in mind there needs to be enough scroll room for the top of the "main" div to hit the top of the viewport. 要使用航路点，请记住，“主” div的顶部需要有足够的滚动空间才能到达视口的顶部。 This will vary depending on the size of the browser window the user has open. 这将取决于用户打开的浏览器窗口的大小。 You can set a % offset from the top of the viewport to make it trigger when the element is a certain distance from the top. 您可以设置从视口顶部开始的百分比偏移，以在元素距顶部一定距离时触发它。

If your "main" div is the last element, you can also use the special "bottom-in-view" offset to make it work once the scroll hits the bottom of the page, even if the top of "main" can't reach the top of the viewport: 如果“ main” div是最后一个元素，则即使滚动条到达页面底部，您也可以使用特殊的“ bottom-in-view”偏移量使其工作，即使“ main”的顶部无法到达视口顶部：

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

All of this information is available in the documentation. 文档中提供了所有这些信息。 See http://imakewebthings.com/waypoints/api/offset-option/ for more details 有关更多详细信息，请参见http://imakewebthings.com/waypoints/api/offset-option/

用户滚动浏览时触发Jquery

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-06-14 13:50:02

用户滚动浏览时触发Jquery

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-06-14 13:50:02

解决方案1
1 已采纳 2017-06-14 13:50:02