Question

我在JavaScript中遇到了scrollTop属性的问题，并希望有人可以提供帮助。根据MDN，该值对应于像素偏移，这是有意义的。我遇到麻烦的事实是它看起来并不那么简单。这是Codepen示例：http://codepen.io/anon/pen/vGJZMV

我想创建一个缩小的标题效果，其中标题在滚动时缩小到某个点，然后停止。听起来很简单（应该是）。我正在听“滚动”卷轴＆＃39;我的可滚动元素上的事件，并从最大标题高度减去该值，一些条件确保它保持在我想要的金额之间。我没有在我的差异函数上使用任何类型的标量乘数，因此，在我看来，在可滚动区域和标题之间不应该发生视差滚动效果（尽管在我的例子中，显然存在）。有什么想法吗？

编辑：为了更好地澄清问题，我希望标题以与文本滚动相同的速率缩小，以便文本不会在标题后面直到标题处于其最小高度。现在的方式，内容框的垂直翻译有效地使文本的移动速度是其scrollTop值的两倍，因为它可以滚动和翻译。

Answer 1

如果通过＆＃34;视差滚动效果＆＃34;，你的意思是标题缩小比内容滚动慢，那是因为你的CSS。在您的CSS中，您的transition all 0.3s ease代码为header。这意味着所有属性都不会立即应用更改，但会“＃34; animate＆＃34;宽度为0.3秒。每当你改变header高度时，无论世界其他地方发生什么，都需要0.3秒。

如果删除该行，header的缩减率应与content相同。

Answer 2

在意识到真正的问题是什么（文本容器垂直翻译同时还滚动）之后，我能够通过用滚动量填充内容容器的顶部来解决它，从而将文本向下推以补偿容器的垂直运动。这个更新的笔显示结果，如果有人感兴趣：

http://codepen.io/sunny-mittal/pen/LNjgEK

前面代码的相关更改用星号包围：

header.on 'scrolling' (_, howmuch) ->
  if howmuch is 0
    header.css 'height' 150
    **content.css 'padding-top' 0**
  else if howmuch >= 50
    header.css 'height' 100
    **content.css 'padding-top' 50**
  else
    header.css 'height' 150 - howmuch
    **content.css 'padding-top' howmuch**

scrollTop值与实际像素

2 个答案: