移动物体的过渡位置:固定？

Question

这似乎应该是一个简单的问题,但我绝不是一个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事件来更改类,结果是相同的.如果有人可以提供帮助,我会很感激!

Answer 1

你错过px了你top应该阅读的价值top: 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();而不是top因为它更高效.使用transition或animation使用transform获取GPU加速,转换top不会.

$('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>

Answer 2

尝试给初始top值一个单位，例如：top: 50px。

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