jQuery（或CSS3）在滾動內容部分之間切換

Question

我希望你能指引我朝着正確的方向發展。

我想複製導航，類似於一個本網站上： http://vsamarehorosho.ru/

基本上，這個想法是，你不要讓用戶擁有該網站的不同部分是在屏幕上與此同時。 因此，如果該部分大於屏幕，它會滾動，直到到達該部分的底部。如果您進一步滾動，則跳轉到下一部分。

如果部分小於屏幕尺寸，則會在頂部看到主要部分，並在底部看到下一部分的一部分，但是當您嘗試滾動時，下一部分會跳到頂部，然後跳到頂部只有當這個尺寸小於屏幕尺寸時才顯示在底部。

在這個例子中，所有的幻燈片都是100％的高度，但這並不總是可以實現的。

希望你能幫助我。

Answer 1

將高度爲100％的所有部分都包裹在div中;

這種方式， 如果部分高度低於100％，包裝將有助於確保只有一個部分顯示在頁面上。 如果截面高度超過100％，滾動可能發生在包裝上，而不是在頁面上。

Answer 2

嘗試使用固定的像素高度。確定「最高」div的必要高度，並將所有div設置爲該高度。這可能會在某些div上留下一些空格，但會確保一次只能看到一個div。

然後，您可以使用在線提供的許多「滾動到」腳本之一，併爲每個單獨的部分創建導航鏈接。 Ariel Flesler的scrollto.js就是一個很好的例子。 http://flesler.com/jquery/scrollTo/

兆焦耳 5150設計

Answer 3

我做了一個庫，可以使之成爲可能。 （fullpage.js）

它甚至適用於較小的部分。