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

这似乎应该是一个简单的问题,但我绝不是一个CSS专家,而且我一直在试图解决问题.所以我有一个ContentHeader元素,当用户向下滚过某个点时,我希望它向上滑动以覆盖NavigationHeader元素.我正在通过将className属性从“content-header”更改为“content-header top”来改变ContentHeader的位置,这样可行,但ContentHeader只是跳转到新位置而不是顺利过渡.这是我目前正在使用的CSS：

.content-header {
    position: fixed;
    top: 50;
    width: inherit;
    z-index: 1030;
    padding: 12px 15px 12px 15px;
    transition: top 1s linear;
}
.content-header.top {
    top: 0;
}

如果您需要查看JavaScript,请告诉我,我也可以添加它,但它基本上只是…

<section className={className} ...

…其中className的值会根据ContentHeader的位置而有所不同.我想也许问题是这发生在React渲染块中并且正在跳过转换,但是我尝试使用不会强制重新渲染的onClick事件来更改类,结果是相同的.如果有人可以提供帮助,我会很感激！

您在最高值上缺少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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="content-header">header</h1>
<button>click</button>

也就是说,我会使用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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="content-header">header</h1>
<button>click</button>