Prevent div über ein anderes div von Scrolling

Question

Ich habe den folgenden Code:

<div id="header"> 
    Header 
</div> 
<div id="leftside"> 
    Left Side 
<!--A lot of text here.--> 
</div> 
<div id="right-container"> 
    <div id="one"> 
    One 
    </div> 
    <div id="two"> 
    Two 
    </div> 
</div> 
<div id="footer"> 
    Footer 
</div> 

#header { 
    background-color: blue; 
    color: white; 
    width: 80%; 
    height: 100px; 
    padding: 5px; 
} 

#leftside { 
    display: inline-block; 
    background-color: purple; 
    color: white; 
    width: 39%; 
    padding: 5px; 
    vertical-align: top; 
} 

#right-container { 
    display: inline-block; 
    background-color: green; 
    color: white; 
    width: 39%; 
    padding: 5px; 
} 
body{height:400px;} 
#one { 
    background-color: yellow; 
    color: white; 
    width: 97%; 
    height: 50px; 
    padding: 5px; 
} 

#two{ 
    background-color: orange; 
    color: white; 
    width: 37%; 
    height: 500px; 
    padding: 5px; 
    position: fixed; 
} 

#footer { 
    background-color: grey; 
    color: white; 
    width: 80%; 
    height: 500px; 
    padding: 5px; 
} 

$(document).scroll(function() { 
    var $self = $("#two"); 
    $self.css('margin-top', 0); 
    var twoOffset = $self.offset().top + $self.outerHeight(true); 
    if (twoOffset > ($("#footer").offset().top - 30)) { 
     $self.css('margin-top', -(twoOffset - $("#footer").offset().top)); 
    } else { 
     $self.css('margin-top', '30px'); 
    } 
}); 

die JSFIDDLE here See.

Das Skript verhindert, dass das div (mit id="two") über die footer div. Scrollt.

Aber ich will auch aus Scrollen über die div (mit id="one") direkt über den div (mit id="two") verhindern, wie Sie in diesem JSFIDDLE geschieht sehen.

Ich denke, das gleiche Skript könnte dafür verwendet werden, aber ich habe versucht, es ohne Erfolg anzupassen. Kannst du mir bitte helfen?

Answer 1

var i = $('#one').offset().top; 
var x = $('#two').offset().top; 
var y = $('window').scrollTop(); 

$(window).scroll(function(){  
    $(this).scrollTop(function(){ 
     if (y <= y || x <= i) { 
      $('#two').css('position','static'); 
     }  
    }); 
}); 

Answer 2

Ihr richtiger Behälter scheint vermasselt. Ich würde Ihnen raten, http://leafo.net/sticky-kit/ zu verwenden und tun

$("#two").stick_in_parent();