Sticky-Kit-Element springen

Question

Ein Problem mit Sticky-Kit, die eines meiner Elemente zu springen verursacht, wenn es das Ende seiner Eltern Div erreicht.

Hier ist mein Code:

<div class="wrapper"> 

<div id="bg"> 

    <div id="text"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididdunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exedrcitation ullamco laborisd nisi ut aliquip ex ea commodo consequat. Duisds aute irure dddsdsdsolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 
    </div> 

    <div id="pic1"> 
    Pic1 
    </div> 

    <div id="pic2"> 
    Pic2 
    </div> 

    <div id="pic3"> 
    Pic3 
    </div> 

</div> 

</div> 

CSS

.wrapper { 
    height:2000px 
} 

#text { 
    float:right; 
    position: relative; 
    width: 300px; 
    background-color:orange; 
    height:400px; 

} 

#bg { 
    background-color: #c0c0c0; 
    width:800px; 
    height:650px; 
    padding:0; 
    margin:0; 
} 


#pic1 { 

height:150px; 
    width: 300px; 
    position:relative; 
    background-color:red; 

} 

#pic2 { 

height:150px; 
    width: 300px; 
    position:relative; 
    background-color:blue; 

} 

#pic3 { 

height:150px; 
    width: 300px; 
    position:relative; 
    background-color:green; 

} 

JS

$(document).ready(function() { 
    $("#text").stick_in_parent(); 
    $("#pic1").stick_in_parent(); 
    $("#pic2").stick_in_parent(); 
    $("#pic3").stick_in_parent(); 


}); 

http://codepen.io/SeanLindsay1/pen/dOqgER

scheint aufgrund der div rechts schwebte wird auftreten werden, b Aber ich bin mir nicht ganz sicher.

Answer 1

Remove "position: relative" und es sollte wie erwartet verhalten:

#text { 
    float:right; 
    width: 300px; 
    background-color:orange; 
    height:400px; 
}