容器高度变化使 children 在 safari 中摇晃

Question

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

所以它在 chrome 和 firefox 上运行良好，但在 safari 中，容器内的图像会抖动，我尝试使用 float left ，也尝试将 top 和 left 值设置为 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 免费解决方案怎么样？

您可以创建一个 div，位置 'fixed'，这意味着相对于 window，并使 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

容器高度变化使 children 在 safari 中摇晃

Container height change makes children shake in safari

safari

jquery

height

shake