Question

我真的对滚动事件有疑问。我试着彻夜解决它，但我不能。

我正试着在顶部贴上导航。当$(window).scrollTop()在导航之前通过点时，粘贴效果将会处理。

问题是，IE和Chrome会产生“眨眼”效果（类似延迟过程）但不会出现在Firefox上。

在我的研究中，我知道默认情况下Firefox有“平滑滚动”。

但是，请在Chrome或IE上查看此示例

http://www.backslash.gr/demos/jquery-sticky-navigation/

就像在Firefox上一样平滑，代码就是那么简单......

关键是，我正在做与此示例完全相同的事情，但为什么我有'眨眼'效果？

是CSS上的技巧吗？

有没有什么方法可以像js上的firefox那样创造一个流畅的scro ??

非常感谢你的帮助。

$(window).on('scroll', Sticky);

function Sticky(){
    $(this).scrollTop() > anchor.offset().top
    ? nav.css({ 'position': 'fixed', 
                      'z-index': z_index, 
                       top: y, 
                       left: x, })
    : nav.css({ 'position': 'static', });
};

Answer 1

查看不完整的示例代码，很难确定发生了什么，所以请使用完整代码更新您的问题，或者更好 - 上传JSFiddle以便为我们提供示例，我们可以直接更新必要的改变。到目前为止（基于我之前所说的），由于示例代码中的拼写错误，您似乎得到flickering效果：

? nav.css({ 'position': 'fixed', 'z-index': z_index, top: y, left: x, }) : nav.css({ 'position': 'static', });

你没有终止需要应用的CSS属性和值数组（你用逗号,结束它），并且你没有在一个引号中包含一些CSS属性'。 您的代码应：

? nav.css({ 'position': 'fixed', 'z-index': z_index, 'top': y, 'left': x }) : nav.css({ 'position': 'static' });

当然，前提是您已经预先设置了变量z_index，y和x。

编辑＆amp;免责声明：我使用原始演示代码创建了一个新的JSFiddle。您提到的演示版权受版权保护，所以请将您的感谢归功于原作者，而不是我，如果这可以帮助您。我发布的JSFiddle代码可以免费下载。所以我想将它重用于演示目的也是可以的。更改该代码以符合您的要求，并在更新它时将其更新为新版本。它可以帮助您跟踪您做错的地方（如果有的话）。 ;）

Answer 2

我认为你可能会在这里混淆两件事。

查看您链接的工作代码。如果你使用鼠标滚动滚动chrome或IE或firefox，那里就会闪烁。
眨眼是因为你突然改变位置。尝试更改js，使其为位置设置动画，而不是突然改变其值。

正如其他人所说，链接到一个正常工作的代码并期望通过显示一个技巧来回答可能对我们所有人都没有帮助。尝试在js的位置变化线上添加动画，看看是否有帮助。

这里没有诀窍。它全部在代码中，所以阅读源和享受。

js滚动平滑

2 个答案: