Check out the JSFiddle example here
I'm currently working on a website utilizing Bootstrap 3. I have an image that sticks to the page when scrolling by changing its position to fixed. While this functionality works, the image tends to shift slightly once it becomes fixed. I believe this issue is related to margins (I've experimented with pixel values and found that using percentages helps solve the problem, especially for responsive design). Ideally, I want the image to remain in its initial position without any shifting when it becomes fixed.
Here's the code snippet:
HTML
<div class="row">
<div class="col-sm-5">
<h2 class="white">Some Text</h2>
</div>
<div class="col-sm-7">
<img class="img-responsive screen-phone" src="img/phone.png">
</div>
</div><!--END ROW-->
CSS
.screen-phone{
max-width:300px;
margin-top:25px;
margin-left:25%;
z-index:999;
}
Javascript
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop()>1120){
$('.screen-phone').css('position','fixed').css('top','0');
}else{$('.screen-phone').css('position','static');
};
});
});