Stackoverflow - Fixed div inside the container
HTML
<script src="code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
CSS
.wrapper {
width:100%
}
.container {
width:300px;
margin:0 auto;
height:900px;
background:#ccc;
}
.element {
background:#f2f2f2;
position:fixed;
width:50px;
height:70px;
top:50px;
right:0px;
border:1px solid #d6d6d6;
}
JavaScript
$(document).ready(function(){
fixedFunction();
});
$(window).resize(function(){
fixedFunction();
});
function fixedFunction(){
var containerWidth = $(".container").outerWidth();
var elementWidth = $(".element").outerWidth();
var containerOffsetLeft = $(".container").offset().left;
var containerOffsetRight = containerOffsetLeft + containerWidth - elementWidth;
$(".element").css("left", containerOffsetRight);
}