Animate div捕捉元素中的大部分視圖

我有一系列元素，下一個元素。每個元素的頂部都會有內容，但底部會有一個空間放置橫條。Animate div捕捉元素中的大部分視圖

頁面上只有一個橫條。它需要「固定」到第一個元素的底部，直到該元素從視圖中滾動出來，此時它需要動畫到當前視圖元素的底部。

我嘲笑了一個小提琴，它顯示了一些突出顯示當前活動部分的邏輯，我很滿意。這些部分默認爲灰色。當您上下滾動時，最上面的部分變成紅色，表示它是活動部分 - 工作正常。單槓是藍色的。

我正在努力的是讓藍色條動畫到紅色部分的底部，因爲它在滾動上發生變化。

http://jsfiddle.net/9kW5N/2/

我在小提琴代碼不工作，我認爲最主要的原因是因爲窗口滾動事件不是「活」，所以不知道當前活動的（紅色）部分是什麼。

任何人都可以建議如何做到這一點？

感謝任何指點人！

來源

2012-07-05 Dan

因此，我更改了changeSection()函數中的一些代碼。它有點作品，但絕對不完美。也許它會讓你指向正確的方向？

也評論了動畫onScroll。

function changeSection() { 
    $('.active').removeClass('active'); 
    var currentlyActive = $('section').eq(closestArrPos); 
    currentlyActive.addClass('active'); 
    $("#horiz").animate({"top" : currentlyActive[0].offsetTop + currentlyActive.height()}, "fast"); 
}

DEMO：http://jsfiddle.net/9kW5N/5/

而且需要把window.scroll事件在setTimeout函數所以它只被稱爲滾動貫穿完成，而不是多次後有效。

來源

2012-07-05 21:18:23 ahren

謝謝 - 這很有用。我想知道這個解決方案的不穩定性是否因爲在window.scroll事件中調用了設置頂部位置的函數，所以即使對於少量滾動，它也可能被調用了幾百次。你認爲某種setTimeOut會解決這個問題嗎？你有什麼其他理由可以想到爲什麼它現在不能很好地工作？我在我的理解JavaScript的邊緣，所以真的很感謝意見。 – Dan 2012-07-05 22:01:45

就是這樣！這似乎更穩定，比我想象的更簡單：http://jsfiddle.net/9kW5N/7/ – Dan 2012-07-05 22:06:38

Animate div捕捉元素中的大部分視圖

回答

相關問題