Element position fixed limited - html

Question

My problem is:
My element (with position:fixed) overlap the other element (footer).
Need:
I would like the element with position:fixed stay in his position when the scroll on the main content is finish.
like taht :
Its a IHM (not with code)
Example:
https://codepen.io/anon/pen/rKNLrW

Answer 1

A possible way to do this would be to use position: sticky. It will make the element stay on top until the end of the .wrap is reached. Here's an implementation of this:
body {
margin: 0;
padding: 0;
}
footer {
height: 200px;
background: yellow;
padding: 15px;
}
.wrap {
box-sizing: border-box;
height: 800px;
position: relative;
width: 100%;
border: 1px solid red;
}
.aside {
color: #ffffff;
height: 50px;
padding: 15px;
position: sticky;
top: 0;
width: 100px;
background: green;
}
<div class="row">
<div class="col-md-2 wrap">
<div class="aside">aside</div>
</div>
<div class="col-md-8">
</div>
<div class="col-md-2">
</div>
</div>
<footer>footer</footer>

Answer 2

Hope i understand your question.
Goto Codepen
body {
margin: 0;
padding: 0;
}
.hardheight {
height:auto;
}
footer {
height:200px;
background:yellow;
}
.aside {
color: #ffffff;
height: 350px;
padding: 15px;
position: sticky;
top: 0;
width: 100px;
background: green;
padding: 5px;
overflow: scroll;
}
.wrap {
box-sizing: border-box;
height: 800px;
position: relative;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 wrap">
<div class="aside">
<p>Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
</div>
</div>
<div class="col-sm-8 hardheight">
<p>height content</p>
<p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus.</p>
<p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
</div>
<div class="col-sm-2"><p>Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
</div>
</div>
</div>
<footer>footer</footer>