Question

我希望我的标题在滚动时能够平滑缩小，虽然它在Safari中运行得很好，但在Chrome和Firefox中却非常不稳定。

JavaScript的：

$(window).scroll(function () {
    if ($(document).scrollTop() < 35) {
        $('#header').removeClass('tiny');
    } else {
        $('#header').addClass('tiny');
    }
});

CSS：

.tete {
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    height:200px;
    width: 1200px;
    margin: auto;
    background-color: #fcfcfc;
    z-index: 1000;
    transition: all 500ms;
}

.tete.tiny {
    margin-top:-80px;
}

Here is the jsfiddle与大多数html/css/js

相关联

jsfiddle适用于Safari，但不适用于Chrome或Firefox。我刚刚更新了我的浏览器，因此我认为这不是更新问题。

Answer 1

由于您要设置上边距的动画，因此您需要告诉浏览器从哪里开始动画，这是零。所以，你需要：

.tete {
    margin-top:0;
}

演示：http://jsfiddle.net/kthornbloom/5W7pa/2/

您还应该在转换前添加：

    transition: all 500ms;
    -o-transition: all 500ms;
    -ms-transition: all 500ms;
    -moz-transition: all 500ms;
    -webkit-transition: all 500ms;

您实际上并不需要所有这些，但这样做应涵盖旧的，当前的和未来的浏览器。

调整卷轴上的标题大小在safari中运行良好，但在chrome和firefox上变得不稳定

1 个答案: