2013-07-31 33 views
0

我希望你能指引我朝着正確的方向發展。jQuery(或CSS3)在滾動內容部分之間切換

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

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

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

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

希望你能幫助我。

+0

你到目前爲止嘗試過什麼?您可以使用jQuery滾動功能來檢查用戶是否正在滾動,並使用scrollTop將頁面定位到下一部分。 – putvande

+0

我現在正在嘗試。我還沒有想出,如何通過必須滾動的所有部分ID。 – user1722113

+0

只需[fullpage.js](http://alvarotrigo.com/fullPage/)。讓事情變得更容易:) – Alvaro

回答

0

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

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

+0

好吧,謝謝你,但那樣做不會,因爲當你看到第一個div的下半部和第二個的上半部分時,你仍然可以滾動到一個點。這正是我想要避免的。 – user1722113

0

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

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

兆焦耳 5150設計

-1

我做了一個庫,可以使之成爲可能。 (fullpage.js)

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