2015-10-16 39 views
1

我希望能夠在'Designing For 20-Somethings'部分中創建類似於頁面下方的this one的效果。 效果實質上是獲取長圖像以更改MacBook或iPhone等設備中的css頂級值,因此看起來好像設備中的圖像也在滾動而用戶正在滾動網站時滾動。jQuery更改滾動條上的最大值

我創建了一個fiddle來顯示我有多遠,但這在調整大小或初始加載時效果不佳。

這是一些代碼,我用下面

var yOffset = $element.offset().top - ($(document).scrollTop() + $(window).height()/diviser) 

任何幫助表示讚賞。

+0

您是否試圖讓此窗口在您的macbook屏幕內滾動?您指向的示例僅使用4個具有背景色和固定位置的div創建金邊框。那是你想要做什麼?我擔心你想要完成的事情不清楚你的問題或你的小提琴。 –

+0

@GreggDuncan我已經更新了這個問題,希望這可以解釋我正在努力實現的更好。我正在討論MacBook和iPhone的更深層次的地方,其中的圖像改變了最高價值。我也創建了一個類似於這個例子的小提琴,但是並不完全正確。 –

+0

我不確定您的意思是「更改最高價值」。 '桌子'和'移動'divs絕對定位。那麼裏面的圖像被賦予一個style =「top:-180px;」這會讓它們移動起來,看起來您已經在平板電腦或手機內向下滾動了。那是你在說什麼? –

回答

0

好,我現在就看到它。但是這個運動非常微妙,我甚至沒有注意到它。對於那些幾乎不明顯的東西來說,它看起來很多工作。看起來他正在根據完整窗口滾動的某個百分比更改來更改圖像的頂部位置,但只有當圖像位於視口內時纔會更改。

就在我頭頂(完全未經測試)之類的東西會將圖像向上滾動並且窗口滾動速度的1/4;

var mobiletop = $('.mobile').position().top; 
var scrollfactor = 4; 

$(window).scroll(function(){ 
    if($(window).scrollTop() > mobiletop){ 
     var imgtop = $('.mobile img').position().top - (($(window).scrollTop() - mobiletop)/scrollfactor); 

     $('.mobile img').css('top', imgtop + 'px'); 
} 
+0

這個問題,當你向上滾動時它也增加了'top'的值,它似乎以比窗口滾動更高的速度進行。 –