Как сделать так чтобы контейнер <div> двигался с экраном браузера только в рамках другого контейнера

Для этого нам понадобится три файла: (index.html; css_fail.css; biblioteca.js)

В файл index.html вставляем секцию, в которой и будет двигаться наш контейнер:

<html>
<head>
<link href="css_fail.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="biblioteca.js"></script>
</head>
<body>

<div style="position:relative; top:200px; left:0px; height:1500px; width="99%"; border:1px solid blue;">

<section>
<div id="work-post-1" class="work-post">
                                        
<div class="work-content">                   
<img src="coloboc.png" style='margin:10px 0px;' height="170" width="210" border="0">
</div>
                                        
<script type="text/javascript">
jQuery(document).ready(function($) {
offset_left = $('#work-post-1 .work-content').offset().left + 0;
$(window).bind('resize', function() { 
offset_left = $('#work-post-1 .work-content').offset().left + 0;
});

$(window).scroll(function(event) {
var y = $(this).scrollTop();

var workheight_ = $('#work-post-1').height();
var worktop_221 = $('#work-post-1').offset().top;
var contentheight_ = $('#work-post-1 .work-content').height();
var contenttop_221 = $('#work-post-1 .work-content').offset().top;
if((contentheight_ + 10) < workheight_) {
if(contenttop_221 - y < 9 && (workheight_ + worktop_221) - (contentheight_ + y) >= 25) {
$('#work-post-1 .work-content').addClass('fixed');
$('#work-post-1 .work-content').css({'left': offset_left + 'px'});
} else if((workheight_ + worktop_221) - (contentheight_ + y) < 25) {
$('#work-post-1 .work-content').removeClass('fixed');
$('#work-post-1 .work-content').addClass('absolute');
}       else if($('#work-post-1 .work-content').hasClass('fixed') && (contenttop_221 - worktop_221) < 25) {
$('#work-post-1 .work-content').removeClass('fixed');
}
else if($('#work-post-1 .work-content').hasClass('absolute')) {
$('#work-post-1.work-content').removeClass('absolute');
$('#work-post-1 .work-content').css({'left': offset_left + 'px'});
$('#work-post-1 .work-content').addClass('fixed');
}
}
});
});
</script>
</div>                 
</section>    
</div>
</body>
</html>

посмотреть

В файле css_fail.css мы зададим размеры нашим блокам и позиционирование на экране:

.work-post {
        width="99%";
        height: 900px;
        border:1px solid green;
        position: relative;
        left: 10px;
}
.work-content.fixed {
        position: fixed;
        width="99%";
        height: 180px;
        top: 10px;
        border:1px solid gold;
}
.work-content.absolute {
        position: absolute;
        width="99%";
        height: 180px;
        bottom: 0px;
        left: 0px !important;
        border:1px solid red;
}

В файл biblioteca.js необходимо записать библиотеку jquery, которую вы можете скачать у нас или с официального сайта.

И так можете посмотреть, что у нас получилось: Взглянуть!