I've been experimenting with a div that switches between position: absolute and position:fixed on scroll. You can view the issue with my code on JSFiddle: http://jsfiddle.net/g9NVj/2/
The problem areas are the pink and blue boxes that change color as you scroll. The correct width and position (the desired result) is seen in the pink box, while the blue box is malfunctioning. The blue box with class .fix switches to position:fixed and sticks to the very left of the window, getting a different width (partially hidden behind a sidebar menu) instead of staying within its parent element.
I attempted to remedy the issue by adding position:relative to the parent element, but that did not resolve the problem.
Here is a snippet of the crucial part of the code from the fiddle, but please refer to JSFiddle for the complete code:
.content {
width: 100%;
overflow: hidden;
position: relative;
border-bottom: 1px solid #CCD5D5;
}
.c-2 {
width: 50%;
min-height:1px;
float:left;
overflow: hidden;
/*position: relative; TRIED THIS BUT DOESN"T WORK */
}
.c-2.last {
padding: 80px;
}
.sticky {
z-index: -1;
background: #e4f;
}
.fix {
position:fixed;
width:50%;
top: 0;
left: 0;
background: #34e;
}
.abs {
position:absolute;
bottom:0;
width:50%;
left:0;
background: #e4f;
}