jQuery Waypoints 上下文在 Safari 或 Chrome 中不起作用答案

【问题标题】：jQuery Waypoints Context not Working in Safari or ChromejQuery Waypoints 上下文在 Safari 或 Chrome 中不起作用
【发布时间】：2013-11-06 15:25:49
【问题描述】：

我有一个 Web 应用程序，它以 100% 的宽度和高度调整 html 和 body 元素的大小，并将 overflow: scroll 放在 body 上以创建全屏幻灯片元素。我正在使用 jQuery Waypoints 进行粘性导航并确定当前可见的幻灯片。

由于 body 元素在技术上是唯一的滚动，我设置了context: body。这在 Firefox 中按预期工作，但在 Chrome 或 Safari 中不会触发航点。

我可以通过手动在滚动到应该触发的点后调用$.waypoints('refresh');来触发航点，但是在每个滚动事件之后调用它似乎是一个非常麻烦的解决方案。

$('body').on('scroll', function(){$.waypoints('refresh');})——它有效，但肯定不漂亮。

我假设这与每个浏览器解释 DOM 的方式有关，但是 Chrome 和 Safari 不能很好地处理可滚动元素中的航点是否有已知原因？

我正在寻找两件事中的一件，要么是我在使用航点时所做的倒退，要么是潜在的问题，以便我可以修复它并使航点对每个人都正常工作。

为了记录（在任何人询问之前），我已经完成了我的研究，这不是fixed elements 的问题。

编辑： 终于得到了为此而构建的 CodePen。 Take a look.

【问题讨论】：

似乎问题在于您操纵body 的方式和滚动行为。在scroll 事件上设置超时是否使它不那么难看？这样它就不会触发每一个滚动，但只有当用户停止滚动一段时间，可能是几毫秒，比如当他们从滚动输入上抬起手指时。
@MikeLyons，我目前正在使用超时解决方案，它的性能更高，但仍然感觉像一个不需要的 hack。当您操纵滚动行为时，航点应该（并且根据我的经验，确实）与元素一起使用。这就是context: scrollingElement 选项的用途。似乎只有 Firefox 允许航点功能访问 body 内元素的滚动位置。
你能发个链接或jsfiddle吗？
@JoshHarrison 自从发布此内容以来，我一直在尝试构建一个，但一直被叫走。我刚刚完成，它位于codepen.io/justinthrelkeld/pen/qaGlK
您的原始实现有codepen吗？由于固定元素的偏移量是如何计算的，我无法强调您不想使用现在发布的笔。

标签： javascript google-chrome safari jquery-waypoints

【解决方案1】：

从 html 中删除 overflow:hidden。不幸的是，这似乎是必需的 - 我希望它不会破坏您的布局。

接下来，您需要 #nav.stuck { position: fixed; } 而不是 absolute 来作为粘性标题。

使用这个js：

$('#nav').waypoint(function(direction) {
  if (direction == 'down') {
          $(this).addClass('stuck');
        } if (direction == 'up') {
          $(this).removeClass('stuck');
        };
});

这对我有用 - 请参阅 http://codepen.io/anon/pen/GgsdH

【讨论】：

这解决了它，但我花了一秒钟才弄清楚原因。最初在构建布局时，我们需要使用 context: body 才能让它工作，但看起来有些东西已经改变了，设置 context 实际上导致它无法在 Safari 和 Chrome 中工作。将context: body 和overflow: hidden 取出固定的东西，但为什么context: body 一开始就破坏了东西？ body 元素是可以滚动的元素，所以它看起来应该可以正常工作。
另外，absolute 与 fixed 的关系很好。我在 CodePen 中输入错误...
太棒了。如果解决了，您介意接受答案吗？
请勿使用使用固定位置导航元素作为航点的解决方案。在任何刷新过程中都会出现很多意外行为（例如调整窗口大小）。
我想你误会了。这实际上并不能解决问题。你让我走上了正确的轨道（仍然不确定为什么context: body 的行为不符合预期......），但就像@imakewebthings 所说，固定元素永远不应该用于航点，即使它们似乎工作。跨度>

【解决方案2】：

这个怎么样？

$(window).load(function() {
        $('#myheader').waypoint('sticky');
});

… 而不是这个：

$(document).ready(function(){   
    $('#myheader').waypoint('sticky');
});

如果您要加载大量图像，这当然是愚蠢的，但这个解决方案节省了我的时间。

【讨论】：

【解决方案3】：

如果适合您的布局，请尝试在正文和 html 上使用 min-height: 100% 而不是 height。

【讨论】：

不幸的是，height 是这条路。
你用这个解决了这个问题吗？它不适合我

【解决方案4】：

删除 html 和 body 中的溢出和高度，也不需要上下文。为我工作。

【讨论】：