2013-11-28 41 views
0

開始向下滾動時浮動<div>,當滾動時<div>接觸頁腳時反之亦然。我能夠通過將此代碼做到這一點:開始向下滾動直到頁腳開始向下滾動

if (window_top== div_top){ 
    $arrow.css({position:'fixed',bottom:0,top:"auto"}); 
} 

this link但我的問題是我得到震動效果。我怎樣才能阻止這種搖動效應,並順利地上下滾動?

+0

嚴重的是,什麼是這樣做的目的?看http://jsfiddle.net/be2Ff/14/。相同的結果沒有JS和相同數量的css – TCHdvlp

+0

您好TCHdvlp,感謝您的回覆,對不起,我在代碼上犯了一個錯誤,請檢查以下新代碼:http://jsfiddle.net/be2Ff/15/。搖動效果在這裏可見。我想停止這種搖動效果,並順利上下滾動? – user3045602

+0

我是:我試圖從一個位置浮動一個位置,當滾動 下(這個div的位置是固定的)到某個位置(例如,直到我的頁腳頂部的 )垂直,並且想要做反之亦然,當我滾動 了。我谷歌它一些如何發現這jsfiddle的代碼,我做了一些 修改按我的要求,但震動的影響殺了我。 – user3045602

回答

0

好的,這是你需要做的。首先,晃動行爲是完全正常的看你的代碼,因爲!當您滾動時,測試if (window_top > div_top)基於舊的位置。 移動箭頭之前。當您的箭頭位於頁腳下方時,您將其設置爲window_top == div_top對於下一次滾動爲真的方式。接下來滾動,window_top == div_top將是真實的,所以你移動你的箭......等等......總之,你需要做的是:

1:保存在一個全局變量的初始箭頭頂部位置

var initialH = $('#arrow').offset().top; 

2:不同的向上滾動和向下滾動

How can I determine the direction of a jQuery scroll event?

3:同時滾動是向下,只是檢查

if (window_top > div_top) 

如果屬實,則可以用absolute代替fixed並將箭頭附加到頁腳。

4:如果滾動達:

如果arrow_top < (arrow_initial_height + $(window).scrollTop()),你不可以做什麼,否則,設置回原來的頂部偏移到你的箭,所以它會收回是原來的位置。你將擺脫搖晃的影響。

爲了順利滾動,我確定有大量的教程解釋如何做到這一點。

工作小提琴:http://jsfiddle.net/be2Ff/30/

+0

嗨TCHdvlp,沒有振動的影響了..再次感謝。我跟着你所有的4個步驟,但對步驟有疑問2.請檢查這個鏈接:http://jsfiddle.net/be2Ff/28/ ......現在我想要的是當向下滾動箭頭應停留在原始箭頭到達原始位置時的位置,不要始終粘在黃色的頁腳上.....向上滾動時,向下滾動時向下滾動,像這樣.. – user3045602

+0

我的不好。我會編輯我的答案。步驟4必須是:如果向上滾動...所以,如果向上滾動,當'window_top> footer_top'回到固定位置。 – TCHdvlp

+0

還有其他的錯誤,我會編輯小提琴。尋找答案 – TCHdvlp