css中的移动位置,css – 移动具有位置的物体的过渡：固定？

您在最高值上缺少px,应该读取顶部：50px;

$('button').on('click',function() {

$('h1').toggleClass('top');

})

.content-header {

position: fixed;

top: 50px;

width: inherit;

z-index: 1030;

padding: 12px 15px 12px 15px;

transition: top 1s linear;

}

.content-header.top {

top: 0;

}

header

click

也就是说,我会使用transform：translateY();而不是顶部,因为这更高效.使用具有变换获得GPU加速的过渡或动画,其中过渡顶部不会.

$('button').on('click',function() {

$('h1').toggleClass('top');

})

.content-header {

position: fixed;

transform: translateY(50px);

width: inherit;

z-index: 1030;

padding: 12px 15px 12px 15px;

transition: transform 1s linear;

}

.content-header.top {

transform: translateY(0);

}

header

click