Question

我有一个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在可滚动元素中不能很好地使用路标？

我正在寻找两件事之一，无论是我在使用航点时做了什么，或者底层问题是什么，所以我可以修复它并让航点适合每个人。< / p>

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

编辑最终获得了为此构建的CodePen。 Take a look

Answer 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

Answer 2

这个怎么样？

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

......而不是：

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

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

Answer 3

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

Answer 4

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

jQuery Waypoints上下文无法在Safari或Chrome中运行

4 个答案: