Question

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

我正在使用Bootstrap构建一个网站3.在滚动中，我有一个图像通过将位置更改为固定来粘贴到页面。然而，一旦它固定，它总是会移位一点。我知道这与边距有关（我玩了像素，这似乎实际上解决了问题，边缘左边需要为响应网站的百分比）。当它变成固定时，我不希望图像从它的最初安息点移动

以下是代码：

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

如果删除这些保证金声明，一切都按照您的意愿运行，不是吗？

Answer 2

好吧，我想出来了。需要做的是你在包含DIV上放置一个单独的类。你给它留下:(无论你的百分比值是多少）。您将包含图像的左边距离关闭。如果像我一样使用Bootstrap，你必须解决边缘问题，你可以创建两个类，就像我删除行的边距和col-sm-7一样。在我的情况下，我做了：

.screen-phone{
 max-width:300px;
 margin-top:25px;
 /*Removed margin-left:25%*/
 z-index:999;

}

.sticker{
 left:25%
}

.zero-row{
 margin:0;
}

.no-margin{
 width:0;
}

HTML：

<div class="row zero-row">
        <div class="col-sm-5">
            <h2 class="white">Some Text</h2>
        </div>
        <div class="col-sm-7 no-margin sticker">
            <img class="img-responsive screen-phone" src="img/phone.png">
        </div>
</div><!--END ROW-->

更新了Fidde：https://jsfiddle.net/1chkghhq/1/

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

2 个答案: