3

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

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

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

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

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

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

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

编辑：终于得到了为此构建的 CodePen。看一看。

4

4 回答 4

1

这个怎么样？

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

…而不是这个：

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

如果您要加载大量图像，这当然是愚蠢的，但是这个解决方案挽救了我的一天。

于 2014-10-31T10:54:15.707 回答
1
于 2013-11-06T17:33:02.753 回答
0

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

于 2015-02-04T16:29:27.757 回答
0

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

于 2013-11-06T15:32:57.097 回答