Question

我在顶部图片上创建了此效果，它在滚动和隐藏时粘到顶部...这是网站： The site

所以它在chrome，firefox上工作得很好但是在safari中容器内部的图像抖动，我尝试向左浮动，也尝试将顶部和左侧值设置为0但它仍然抖动... 任何人都知道问题是什么？

css代码：

.devBigImage {
    position: relative;
    margin-bottom: 2em;
    overflow: hidden;
}
.devBigImage img {
    display: block;
    height: auto;
    width: 100%;
}

JS代码：

        var imageHeight = $('.devBigImage').height(),
        imageMarginBottom = $('.devBigImage').css('margin-bottom').replace(/[^-\d\.]/g, '');

    $(document).on({
        scroll: function() {
            if ($('.devBigImage').length>0) {

                var iCurScrollPos = $(this).scrollTop();

                    if (imageHeight - iCurScrollPos > 0) {
                        $('.devBigImage').css({
                            'height':imageHeight - iCurScrollPos,
                            'position':'relative',
                            'top':iScrollPos,
                            'margin-bottom':iScrollPos+parseInt(imageMarginBottom),
                        });
                    }

            }
        }
    });

HTML：

    <div class="devBigImage">
    <img src="http://www.get-covers.com/wp-content/uploads/2012/04/Colorful-Stripes.jpg">
</div>

Answer 1

我已在jsfiddle中检查了您的代码，这在Safari中运行良好，但我必须将iScrollPos更改为iCurScrollPos以使其正常工作。我认为问题在于CPU的相对位置是昂贵的。另外，请尝试将已发现的jQuery DOM对象存储在变量中的方法，这样就不需要在DOM上重复搜索它们。

var bigTmageDiv = $('.devBigImage');
var imageHeight = bigTmageDiv.height(),
    imageMarginBottom = bigTmageDiv.css('margin-bottom').replace(/[^-\d\.]/g, '');

$(document).on({
    scroll: function() {
        if (bigTmageDiv.length>0) {

            var iCurScrollPos = $(this).scrollTop();

                if (imageHeight - iCurScrollPos > 0) {
                    $('.devBigImage').css({
                        'height':imageHeight - iCurScrollPos,
                        'position':'relative',
                        'top':iScrollPos,
                        'margin-bottom':iScrollPos+parseInt(imageMarginBottom),
                    });
                }

        }
    }
});

希望这可以解决问题或至少优化您的代码。

Answer 2

所有css javascript-free解决方案怎么样？

您可以创建一个位置为“fixed”的div，这意味着相对于窗口，并使该div的z-index为-1，这样页面内容的其余部分将位于顶部。

然后你只需要某种透明的占位符div，所以当页面首次加载时，透明div将保持顶部位置，显示底层徽标。

滚动页面时，透明div向上滚动，而固定位置div在后台保持原位

#background-logo {
    position: fixed;
    top: 0px;    
    margin-bottom: 2em;
    overflow: hidden;
    z-index: -1
}
#hidden-background-logo-placeholder img{
    visibility:hidden;
    opacity:0;
}

Here is the JSFiddle

容器高度变化使孩子们在野生动物园中摇晃

2 个答案: