水平移動一個div然後垂直

我在這裏做什麼，我有個例：http://jsfiddle.net/jewb/tM5h7/4/水平移動一個div然後垂直

我的劇本是這樣的：

var minHeight = $(window).scrollTop(); 
var maxHeight = $(window).height(); 
var middleHeight = (maxHeight + minHeight)/2; 

$(window).scroll(function() { 
    var positionTopDiapo = $('#diaporama').offset().top; 
    var hauteurDivDiapo = $('#diaporama').height()/2; 
    var positionTop = $('#frame').offset().top; 
    var hauteurDiv = $('#frame').height()/2; 
    var positionY = positionTop + hauteurDiv - $(window).scrollTop(); 
    var positionYDiapo = positionTopDiapo + hauteurDiv - $(window).scrollTop(); 
    var bottomDiapo = (positionTopDiapo - $(window).scrollTop()+ $('#diaporama').height()); 
    var bottomFrame = (positionTop - $(window).scrollTop()+$('#frame').height()); 


    var window_width = $(window).width() - $('#frame').width(); 
    var document_height = $('#diaporama').height() - $('window').height(); 
    var scroll_position = $(window).scrollTop(); 
    var object_position_left = window_width * (scroll_position/document_height); 
    $('#frame').css({'left': object_position_left }); 

    if(positionYDiapo<=middleHeight){ 
     $('#frame').css({position:'fixed', top: positionTop - $(window).scrollTop(), bottom:'auto'}); 





       if(bottomDiapo<=bottomFrame){ 
        $('#frame').css({ 'position': 'absolute' }); 
        $('#frame').css({ 'bottom': '0px' }); 
        $('#frame').css({ 'top': 'auto' }); 
       } 

    } else{ 
     $('#frame').css({position:'absolute', top:'0px', bottom:'auto'}); 
     $('#frame').css({ 'left': '0px' }); 
    }

這裏的問題。起初，#frame有一個位置absolute, top:0px;當#diaporama到達窗口的中間位置時，我需要固定位置#frame。當#frame已修復時，我需要它從左向右滾動。我需要達到#frame的末尾，同時#diaporama的底部到達頁面中間。當到達結尾時，#frame將具有絕對位置，並且bottom:0px;

然後，我繼續滾動，直到文檔結束。如果我向上滾動，它將反向地做同樣的事情。

來源

2013-09-26 Jewb

這很好。祝你好運。 –

猶太人你需要查明手頭的問題更多，沒有人會簡單地翻閱所有的代碼給你.. –

問題是我似乎無法找到一種方式來滾動所有的李水平，而#diaporama是垂直滾動。我需要做這樣的事情：http://wildbluetech.com/。在文化部分 – Jewb

這裏是我迄今所做的：jsfiddle

var scroll_position = $(window).scrollTop(), 
     d = $('#diaporama').get(0).scrollHeight, 
     c = $('#diaporama').get(0).scrollWidth, 

    scrollPercent = (scroll_position/(d+c)); 
    var position = (scrollPercent * - $('#frame').width())+positionTopDiapo; 
    var positionGauche = $('#frame').offset().left; 

    var tarif = $('#tarif').offset().top - $(window).scrollTop();

有一些小故障的時候，我給左側位置，但總體來說是非常巨大的。如果任何人都可以改進代碼，請告訴我。我把這段代碼用來幫助其他誰會遇到同樣的問題。對於有同樣問題的其他人來說，這可能是我的一個開始。

來源

2013-09-27 19:36:04 Jewb

水平移動一個div然後垂直

回答

相關問題