Question

这似乎应该是一个简单的问题，但我绝不是一个CSS专家，而且我一直在试图弄清楚我的脑袋。所以我有一个ContentHeader元素，当用户向下滚过某个点时，我希望它向上滑动以覆盖NavigationHeader元素。我通过更改＆＃34; content-header＆＃34;中的className属性来更改ContentHeader的位置。 to＆＃34; content-header top＆＃34;，有效，但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;

＆＃13;

$('button').on('click', function() {
  $('h1').toggleClass('top');
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

也就是说，我会使用transform: translateY();代替top，因为它的性能更高。使用transition或animation transform获取GPU加速，转换top不会。

＆＃13;

$('button').on('click', function() {
  $('h1').toggleClass('top');
})

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

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;
}

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

2 个答案: