Javascript 滚动时设置固定导航动画-错误

我目前正在开发一个网站，该网站应具有类似的功能，如：

你可以看到我所说的效果，如果你在上面的页面上向下滚动。 1. ) 页眉的顶部和底部填充将缩小，然后您可以将页眉从视口中“滚动”出来。 2.）如果继续向下滚动一点（到内容区域），然后再次向上滚动，导航将可见

我还没有实现第二个效果，因为我想先解决第一个效果的问题。我很快就改变了我的现状： HTML标记非常简单：

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

目前，第一种效果（见上文）基本上是有效的，但当您将其与上面链接中的效果进行比较时，它存在一些问题： 1.）我的代码中的所有值都是硬编码的。你有什么想法如何做得不同/更好吗？例如，填充值用JS硬编码。因此，如果我在CSS文件中更改“padding”，我也必须在JS文件中更改它。或者“主体”上的“padding top”（填充顶部）值是硬编码的，但它取决于收割台的初始高度。页眉的“top”（显示或隐藏页眉）值也是如此，它取决于页眉的高度（没有初始的大填充）。 –为了解决至少一些硬编码的值，我考虑在HTML中使用数据属性（至少是起始值和结束值），这样至少我不必在JS中更改任何内容。你觉得这样行吗？虽然我没有一个“top”值的解决方案来显示和隐藏标题。它在某种程度上取决于页眉的高度（填充收缩后）。我还没有其他所有硬编码值的解决方案

2.）您可能已经注意到，当您在向下滚动后滚动回顶部时，会出现一个小的白色间隙。对我来说，这是目前最重要的问题，因为我真的不知道如何解决它。有时，由于“动画”没有正确完成，白色间隙（附加屏幕截图）也相当大。与nzopera.com相比，我的代码看起来相当慢（对我来说），动画也不那么流畅。我想这就是为什么会出现白色的小缺口。我当然可以将背景更改为黑色（与页眉颜色相同）以“消除”白色间隙，但这不起作用，因为内容背景颜色应该是白色，并且不会在每个页面上都有一个大的页眉图像。需要有一个合适的解决方案来解决这个问题，nzopera.com也以某种方式解决了这个问题。任何帮助都将不胜感激

---

到目前为止，仅此而已。当我开始实施第二个效果时，我会有更多的问题；）提前谢谢。仅供参考：正如您可能在我的代码中看到的，我对JS一点也不擅长。如果你有任何其他改进的建议，请告诉我。。。还在学习：）

伙计，我重新修改了你的jquery函数，看看这个小提琴：。 现在，这应该适用于css中设置的所有维度，因此不需要更改js文件中的任何内容

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

CSS代码：

我删除了你们用来对齐图像的填充顶部 与标题

我将

.element

的

z-index

设置为2，以便

.element

在所有项目上方可见，您可以根据需要在将来将其设置为999

我将

position:relative

添加到

.container

，因为我们需要它来使用jquery对齐元素

现在来看jquery代码：

var$element\u outer\u height=$（“.element”）.outerHeight（），

将使用

.element

+的高度作为填充值

$element\u padding=（$element\u outer\u height-$（“.element”）.height（））/2

将为我们提供最初在

元素中使用的
padding top
的值，该值将在下面使用

我们首先使用这个值来对齐元素正下方的容器：

$（“.container”）.css（{top:$element\u outer\u height}）

在“窗口滚动”中，我们执行一项测试：

• 如果滚动的值低于

  .element

  的外部高度，我们必须减少

  .element

  的填充，并减少

  .container

  的

  顶部

  值，以便

  .container

  仍然与

  .element

  对齐
• 如果滚动的值达到

  .element

  的外部高度，我们必须在这里设置

  .element

  的

  top

  值减去它的高度，并将

  填充
  设置为
  0
  ，因此：
  $（.element”）.css（{.top:-1*$（.element”）.height（），padding:0}）

---

希望这会有所帮助，因为这需要大量的工作：D

您是否想过使用SMINT来完成此任务？这可以帮你节省一些时间：非常感谢你的努力，非常感谢。您的代码解决了我的第一个问题以及如何摆脱硬编码值的一些问题。如果我看小提琴，我觉得不太对劲。您去掉了小的白色间隙，但因此标题与内容区域重叠。我认为您不需要重新计算header.outerHeight（）旁边内容的“top”值。Nzopera.com也有一个固定的“填充顶部”。对我来说，标题的“动画”有点奇怪。它将填充缩小为0，然后突然消失：）首先，我不明白“标题与内容区域重叠”，如果你能给我解释一下：）其次，我不看nzopera.com的代码，我只是看了一下效果，所以如果你想用同样的方法解决问题，我想我可以这样做。关于动画的最后一件事，我会给你一个修改过的提琴，它的填充缩小到一个你决定的值，然后它就会消失，我认为这是动画的正确方式：）所以这就是我修复动画的方法

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?