EvgenyTryap,
ниже это не решение, это танцы с бубном ... макет того что требуется сделать, насколько я вас понял.
<!DOCTYPE html>
<html>
<head>
<style>
html *{
margin:0;
padding:0
}
.block{
position: relative;
overflow: hidden;
height: 300px;
width: 600px;
margin: 30px auto
}
#content {
height: 300px;
position: relative;
background-color: #D3D3D3;
overflow-y: auto;
overflow-x: hidden;
}
.wrapper{
height: 1500px;
}
.footer{
background-color: #8B4513;
height:300px;
border-top: rgb(255, 255, 0) 1px dashed;
}
.sidebar{
height:50px;
position: absolute;
top : 250px;
width: 100%;
background-color:#FF0000;
z-index: 100;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var footer = document.querySelector('.footer'),
sidebar = document.querySelector('.sidebar'),
content = document.querySelector('#content'),
topFooter = footer.offsetTop, height = content.clientHeight,
heightsidebar = sidebar.clientHeight;
content.addEventListener('scroll', function() {
var scroll = content.scrollTop + height;
var topSidebar = "0";
var position = "relative";
if(topFooter > scroll ){
topSidebar = (scroll - heightsidebar)+ "px";
position = "absolute"
}
sidebar.style.top = topSidebar;
sidebar.style.position = position;
});
});
</script>
</head>
<body>
<div class="block">
<div id="content">
<div class="wrapper">
<p>Your website content here.</p>
</div>
<div class="sidebar">fixed block</div>
<div class="footer">
<p>footer text</p>
</div>
</div>
</div>
</body>
</html>