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