Question

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

我尝试过使用waypoint。它不起作用。这是代码，它没有错误。

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

HTML code：

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

帮助会很棒！

Answer 1

要使用航点，请记住，需要有足够的滚动空间用于＆＃34;主要＆＃34; div命中视口的顶部。这取决于用户打开的浏览器窗口的大小。您可以设置距视口顶部的％偏移量，以便在元素距离顶部一定距离时触发。

如果你的＆＃34;主要＆＃34; div是最后一个元素，你也可以使用特殊的＆＃34;底部视图＆＃34;一旦滚动到达页面底部，即使顶部＆＃34;主要＆＃34;无法到达视口的顶部：

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

文档中提供了所有这些信息。有关详细信息，请参阅http://imakewebthings.com/waypoints/api/offset-option/

用户滚动时触发Jquery

1 个答案: