2011-08-27 188 views
2

我目前正試圖找到一種方法來鎖定我的標題在屏幕上大部分已滾動頂部後。因此,如果例如我的標題爲150像素高,那麼無論如何,在用戶向下滾動我的頁面時,我可以鎖定頂部135像素滾動頂部之後屏幕頂部的底部15像素?所以無論我的網頁多長時間,總是會有頂部15個像素的頭像。在屏幕滾動過多之後,在屏幕上鎖定div?

我還需要在用戶滾動備份時反轉此操作,以便標題可以返回到原始狀態。

我已經試過了一個骯髒的工作,從而有另一個頭15像素高與一個「固定」位置分層後面我的原始標題,以便當完整的150像素原始的一個熄滅屏幕我的新的一個出現在它後面。這確實有效,但如果用戶在中點捕捉它,它看起來很可恥。

我對JavaScript和恐懼的知識非常有限,可能是我的答案在哪裏。

回答

8

我你想要什麼..和有點困惑什麼youre說..我認爲你做的是同一件事,因爲我做了..但你不喜歡它由於某種原因..

總之。如果我知道你是對的,這應該是有效的。

http://jsfiddle.net/5pJuJ/

本質上存在被定位fixed其爲頭之後元素,它是fixed在頂部,一旦你向下滾動因此顯露。


噢,沒錯..如果這些東西像漸變或其他東西一樣工作得很好..是這個問題嗎?

我這樣做是爲了證明,我以爲你在遇到的問題.. http://jsfiddle.net/5pJuJ/1/(我想你shouldve提供... GRR ..)


這似乎是它是你想要漂亮的正是好:

http://imakewebthings.github.com/jquery-waypoints/

http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

+0

是啊,我的頭實際上是一個形象,陰影和transparen和它上面的文字。所以,如果你可以想象它從頁面底部滾動出來,並且底層的重複頭部從下面出來,它不是很漂亮。 我希望能夠實現某些目標,其中一個標題div是停止滾動並鎖定到位的方式,而不是您描述的方法(我原先使用的方法),因爲在這種情況下它看起來非常糟糕。 – Flickdraw

+0

我的js不夠強大,無法對此進行任何說明。儘管我認爲這可能有點麻煩。 – Joonas

+1

@Flickdraw檢查我的更新答案。 (底部) – Joonas