滚动时动画固定导航 - bug

Question

我目前正在开发一个网站，它应该具有类似这样的功能：http://nzopera.com/2013/the-flying-dutchman

如果您在上面的页面上向下滚动，您可以看到我正在谈论的效果。 1.）标题的顶部和底部填充收缩，然后您将标题“滚动”出视口。 2.）如果您继续向下滚动（到内容区域），然后再向上滚动，导航将变为可见。

我还没有实现第二个效果，因为我想先解决第一个问题。我用我当前的状态创建了一个快速小提琴：http://jsfiddle.net/FN8D/1/embedded/result/ HTML标记非常简单：

<header><!- HEADER CONTENT / NAVIGATION -></header>
<div><!- MAIN CONTENT / NAVIGATION -></div>

我不确定我是否必须将我的JS代码放在这里，因为它很长。如果我必须，请告诉我。您可以在小提琴链接中查看JS。 JS所做的是检查滚动方向并调用函数，该函数计算CSS值（基于当前滚动位置）。该函数有几个参数：

startValue : Initial CSS value
endValue : The CSS value to animate to
distance : After which distance scrolled (in px) should the "animation" be over?
initScroll : When (in px) should the "animation" start? 

目前第一个效果（见上文）大部分都有效，但是当你将它与上面链接中的效果进行比较时，它会遇到一些问题： 1.）我的代码中的所有值都是硬编码的。你有什么想法如何做到不同/更好？例如。填充的值在JS中是硬编码的。因此，如果我更改CSS文件中的“填充”，我将不得不在JS文件中更改它。或者“body”上的“padding-top”值是硬编码的，但它取决于标题的初始高度。标题的“顶部”值也是如此（显示或隐藏标题），这取决于标题的高度（没有初始的大填充）。 - 为了解决这些硬编码值中的至少一些，我想在HTML中使用数据属性（至少是起始值和结束值），所以至少我不需要在JS中改变任何东西。你认为这可行吗？虽然我没有“顶部”值的解决方案来显示和隐藏标题。它以某种方式必须依赖于标题的高度（在填充收缩之后）。而且我还没有其他所有剩余硬编码值的解决方案。

2。）当您向下滚动到顶部后，您可能已经注意到一个小的白色间隙。对我来说，这是目前最重要的问题，因为我根本不知道如何修复它。有时也会发生白色间隙（屏幕截图附件）非常大，因为“动画”无法正常完成。在与nzopera.com的比较中，我的代码看起来很慢（对我而言）并且动画并不那么流畅。我认为这就是为什么出现小的白色差距。我当然可以将背景更改为黑色（与标题颜色相同）以“删除”白色间隙，但这不起作用，因为内容背景颜色应为白色，并且不会有大的标题图像每一页。需要有一个合适的解决方案来解决这个问题，nzopera.com也会以某种方式做到这一点。任何帮助都会非常感激。

到目前为止，这就是全部。一旦我开始实施第二个效果，我就会有更多的问题;）在此先感谢。仅供参考：正如您在我的代码中看到的那样，我根本不擅长JS。如果您有任何其他改进建议，请告诉我......还在学习:)。

Answer 1

伙计，我重写了你的jquery函数，看看这个小提琴：http://jsfiddle.net/FN8Dc/4/。 现在这应该适用于您在css中设置的所有维度，因此您无需更改js文件中的任何内容。

现在请允许我解释一下我的代码：

CSS代码：

1. 我删除了用于对齐图像的主体的填充顶部 标题。
2. 我将z-index的{​​{1}}设置为2，以便.element在所有项目上方可见，您可以根据需要将其设置为999.
3. 我将.element添加到position: relative，因为我们需要使用jquery来对齐元素。

现在为jquery代码：

1. .container将使用var $element_outer_height = $(".element").outerHeight(), +填充值的高度。
2. .element会向我们提供最初在$element_padding = ($element_outer_height - $(".element").height()) / 2;中使用的padding-top的值，此值将在下方使用。
3. 我们首先使用此值将容器直接对齐元素：.element。
4. 在窗口滚动中，我们进行测试：
   • 如果滚动的值低于$(".container").css({ top: $element_outer_height});的外部高度，我们必须减少.element的填充并减少.element的{​​{1}}值，以便{{1}仍然与top很好地对齐。
   • 如果滚动的值达到.container的外部高度，我们必须在此设置.container值.element上限减去它的高度，将.element设置为{ {1}}，因此：top。

希望这会有所帮助，因为它需要做很多工作：D