javascript - 在从初始点移动的滚动固定元素上

Question

JSFiddle:https://jsfiddle.net/DTcHh/19451/

我正在使用 Bootstrap 3 构建一个网站。在滚动时，我有一个图像通过将位置更改为固定来固定在页面上。这是可行的，但是一旦固定，它总是会有点不合适。我知道这与边距有关(我玩过像素，这似乎实际上解决了问题，响应式网站的左边距需要为 %)。当它变成 fixed 时，我不希望图像从它最初的静止位置移动

代码如下:

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');
    };
 });
});

Answer 1

bootstrap 不太喜欢你随意调整它的边距。它有排水沟系统，你的利润非常疯狂:P

如果您删除那些 margin 声明，一切都会如您所愿，不是吗？