javascript - 固定图像滚动移动位置

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

试试这个

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

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

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */

$(document).ready(function(){

    // var stickyPhone = ($#)

    $(window).scroll(function () {
        if ($(this).scrollTop()>500){
            $('.screen-phone').css('position','fixed').css('right','0');
        }else{$('.screen-phone').css('position','relative');
        };
    });
});

我删除了 margin-left 并添加了一个 float right。然后在 JS 上我将位置更改为 left:0。它接缝工作。