認爲在滾動時通過頁面引導一個元素

Question

我必須「引導」以給定方式分別在頁面中移動一個元素（下圖中的紅色元素）（因此它不會與內容相沖突） 。當用戶滾動時，框應該沿給定的路徑移動。

我嘗試將元素的位置設置爲固定在左上角，然後在滾動時沿橫軸移動它。但我認爲這不是最好的解決方案，代碼非常難看。

我也嘗試用skrollr視差框架解決這個問題，但這是不可能的。

這裏是我想要達到一個草圖：

那麼，什麼是解決這個最好的方法？

編輯： 要得到什麼，我想在這裏取得一個更好的主意是一個鏈接到一個網頁，其中有類似的東西：http://rit-team.ru/

Answer 1

該網頁是令人難以置信的冷靜...

如果你想預設路徑（就像他們那樣），那麼委託人非常簡單。定義一個「檢查點」數組，基本上是x座標。然後，使用垂直滾動偏移作爲該數組的索引，並相應地設置移動元素的位置。

如果你想「驅車」任意大小的元素，那麼我不知道。這些傢伙爲他們的努力贏得了設計獎，所以我猜這不是在公園散步。