Waypoints JavaScript（Jquery）

Question

我正在开发一个网页，我想知道如何根据页面当前的位置制作动画。

我的意思是：例如，下面的标记

<body>
    <div id = "header">
        <p> header content goes here</p>
    </div>


    <div id = "content">

        <div id = "first">
            <p>when I sroll into this region I want the background to darken up(and information appears) and an arrow to appear at the bottom showing prompting to scroll down</p>
        </div>

        <div id = "second">
            <p>when I sroll into this region I want the navbar to to change appearace and display info relative to that div only </p>
        </div>

        <div id = "third">
            <p>when I scroll into this region I want a another effect to occur</p>
        </div>

    </div>


    <div id = "footer">
        <p>footer content goes here</p>
    </div>
</body>

如果网页加载，我滚动到三个div中的每一个，然后我想要有一个定义的效果在行动。 我如何在JavaScript（Jquery）中进行此操作？ 或者，如果有人知道任何可以学习这种技术的好消息来源，我很乐意知道

谢谢你们

Answer 1

像这样的东西应该在pageLoad或$(document).ready方法中做到这一点：

var last, 
  docHeight= $(window).height(),
  firstTop = $("#first").offset().top,
  firstBottom = firstTop - docHeight,
  secondTop = $("#second").offset().top,
  secondBottom = secondTop - docHeight,
  thirdTop = $("#third").offset().top,
  thirdBottom = thirdTop - docHeight;



$(document).scroll(function(){
  var thisTop = $(this).scrollTop();
  if(thisTop <= thirdTop && thisTop >= thirdBottom){//#third is now visible
    if(last != 3)//check if we're already in #third
        console.log("entered third");//we entered #third for the first time, trigger effect
    last = 3;
  } else if (thisTop <= secondTop && thisTop >= secondBottom){
    if(last != 2)
        console.log("entered second");
    last = 2;
  } else if (thisTop <= firstTop && thisTop >= firstBottom){
    if(last != 1)
        console.log("entered first");
    last = 1
  } else 
    last = 0;
})

它附加到$(document).scroll事件，并使用jquery的scrollTop()作为文档，而offset().top的元素，确定哪一个已滚动到。 它还使用滚动到的最后一个元素保留变量，因此仅在元素滚动到最初时触发console.log语句，因此在滚动元素时不会触发它。

工作jsfiddle

Answer 2

我最近遇到过类似的问题。 我发现免费的开源divPeek库非常棒。

https://github.com/davidhalford/DivPeek

无需重新发明轮子，特别是如果它已经被发明了！ :)

Waypoints JavaScript（Jquery）

问题描述

2 个解决方案

解决方案1
2 2014-03-06 01:01:56

解决方案2
1 已采纳 2014-03-06 01:11:14

Waypoints JavaScript（Jquery）

问题描述

2 个解决方案

解决方案1 2 2014-03-06 01:01:56

解决方案2 1 已采纳 2014-03-06 01:11:14

解决方案1
2 2014-03-06 01:01:56

解决方案2
1 已采纳 2014-03-06 01:11:14