Alternate direction Scrollen mit Inhalt unter

Question

Ich habe 2 volle Höhe divs. Wenn Sie die Seite nach unten scrollen, scrollt die eine Div nach oben und die andere scrollt in eine entgegengesetzte Richtung. Das funktioniert großartig.

Ich versuche, diesen Effekt zu halten, aber normalen Inhalt voller Breite darunter zu legen, während ich versuche, natürliches Scrollen zu erhalten. Also würde ich gerne den alternativen Scrolling-Effekt beibehalten, aber wenn ich am Ende des letzten Divs, das diesen Effekt verwendet, komme, würde ich gerne weiter scrollen, um normalen Inhalt darunter zu sehen.

Hier ist meine jsFiddle, zur Zeit seiner über die Wirkung Floating I beziehen sich auf: http://jsfiddle.net/u9apC/116/ und die JS eingefügt wird unten als Referenz:

(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

Hier ist ein Beispiel dafür, was ich will:

Answer 1

Ich hoffe, dass Sie danach suchen - es ist ein wenig schwer aus der Beschreibung zu visualisieren.

Es gibt ein paar Tricks, diese Funktion zu erhalten:

1. die Scrollrichtung umkehren, wenn die rechte Spalte oben positiv wird

2. Sicherstellen, dass die .row div hat einen oberen Rand ausreichend es nach unten drücken bis zum unteren Rand der linken Spalte.

   (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); 
   

JSFiddle hier aktualisiert Siehe: http://jsfiddle.net/u9apC/126/

habe ich Refactoring auch Ihren Code ein wenig Doppelarbeit zu reduzieren.

Answer 2

Sie müssen nur er machen Höhe des Körpers gleich der Gesamthöhe der Elemente in ihm. Entweder mit js oder css.