2

我目前正在开发一个网站，它应该具有类似的功能：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。如果您有任何其他改进的建议，请告诉我......仍在学习:)

4

1 回答 1

2

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

现在让我解释一下我的代码：

CSS 代码：

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

现在对于 jquery 代码：

  1. var $element_outer_height = $(".element").outerHeight(),将使用.element+ 填充值的高度。
  2. $element_padding = ($element_outer_height - $(".element").height()) / 2;会给我们padding-top最初使用的值.element，这个值将在下面使用。
  3. 我们首先使用这个值来对齐元素正下方的容器：$(".container").css({ top: $element_outer_height});。
  4. 在窗口滚动时，我们做一个测试：
    • 如果滚动值低于 的外部高度.element，我们必须减少 的填充.element并减小 的top值，.container以便与.container保持良好对齐.element。
    • 如果滚动值达到 的外部高度.element，我们必须在这里设置 top 的top值.element减去它的高度和paddingto 0，因此：$(".element").css({top: -1 * $(".element").height(), padding: 0});。

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

于 2013-10-04T23:38:07.817 回答