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

我删除了左边距并向右添加了一个浮动。然后在JS上我将位置改为左：0。接缝工作。

Answer 2

我进行了一些改动，使其有效：

将班级名称移至div元素而非img元素
仅在必要时使用布尔变量
500像素测试对于文本的大小来说太长了。调用时，由于图像被修复而导致的大小变化将缩小到500以下，从而强制进行另一次更改，依此类推。

请参阅更新的jsfiddle：https://jsfiddle.net/DTcHh/19475/

Answer 3

好吧，我想出来了。需要做的是你在包含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/

滚动移位的固定图像

3 个答案: