Scorrimento della direzione alternato con contenuto al di sotto di

Question

Ho 2 div di altezza piena. Quando si scorre verso il basso della pagina, l'una div scorrono verso l'alto e l'altra scorre in una direzione opposta. Funziona alla grande

Sto cercando di mantenere questo effetto ma di inserire il normale contenuto di larghezza totale al di sotto di esso mentre si cerca di mantenere lo scorrimento naturale. Quindi mi piacerebbe mantenere l'effetto di scorrimento alternativo, ma quando raggiungo il fondo dell'ultimo div che utilizza questo effetto, vorrei continuare a scorrere normalmente per vedere il contenuto normale al di sotto di esso.

Ecco la mia jsFiddle, attualmente il suo galleggiante sopra l'effetto mi riferisco a: http://jsfiddle.net/u9apC/116/ e il JS viene incollato sotto per riferimento:

(function ($) { 
var top = 0; 

$(document).ready(function() { 
    var contentHeight = $('.right').height(), 
     contents = $('.right > .content').length; 

    top = (0 - (contentHeight * (contents - 1))); 

    $('.right').css('top', top + 'px'); 
}); 

$(window).resize(function() { 
    var contentHeight = $('.right').height(), 
     contents = $('.right > .content').length; 

    top = (0 - (contentHeight * (contents - 1))); 

    $('.right').css('top', (top + $(window).scrollTop()) + 'px'); 
}); 

$(window).scroll(function() { 
    $('.right').css('top', (top + $(window).scrollTop()) + 'px'); 
}); 

})(jQuery); 

EDIT

Ecco un esempio di ciò che voglio:

Answer 1

Spero che questo sia quello che cerchi - è un po 'difficile da visualizzare dalla descrizione.

ci sono un paio di trucchi per ottenere questo lavoro:

1. invertire la direzione di scorrimento quando la parte superiore col destra va positivo

2. Assicurarsi che il div .row ha un margine superiore sufficiente a spingerla verso il basso in basso a sinistra col.

   (function ($) { 
       var top = 0; 
       var contentHeight = 0; 
   
       $(document).ready(function() { 
        calcContentHeight(); 
       }); 
   
       $(window).resize(function() { 
        calcContentHeight(); 
       }); 
   
       $(window).scroll(function() { 
        setRightTop(); 
       }); 
   
       function calcContentHeight() { 
        var contents = $('.right > .content').length - 1; 
        contentHeight = $('.right').height() * contents; 
   
        top = 0 - contentHeight; 
        setRightTop(); 
       } 
   
       function setRightTop() { 
        var rightTop = top + $(window).scrollTop(); 
   
        //1. don't allow right col top to go positive 
        if(rightTop > 0) rightTop = 0 - rightTop; 
        $('.right').css('top', rightTop + 'px'); 
   
        //2. Ensure .row has sufficient top margin 
        $('.row').css('margin-top', contentHeight + 'px'); 
       } 
   
   })(jQuery); 
   

V. aggiornamento JSFiddle qui: http://jsfiddle.net/u9apC/126/

Ho anche refactoring il codice un po 'per ridurre la duplicazione.

Answer 2

Hai solo bisogno di fare lui ight del div.body uguale all'altezza totale degli elementi al suo interno. O da js o css.