5

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

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

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

在我的研究中，我知道 Firefox 默认具有“平滑滚动”功能。

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

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

像火狐一样流畅，代码就是这么简单......

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

是 CSS 的诀窍吗？

有什么方法可以像 js 上的 firefox 一样创建平滑的 scrool 吗？

非常感谢您的帮助。

$(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', });
};
4

2 回答 2

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' });

当然，前提是您已经设置了 variables z_index，y并且x事先。

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

于 2013-02-02T15:58:29.580 回答
1

我想你可能在这里混淆了两件事。

  1. 查看您链接到的工作代码。如果您使用鼠标滚轮在 chrome 或 IE 或 firefox 上滚动，那里会出现闪烁。
  2. 眨眼是因为你突然改变了姿势。尝试更改 js，使其确实为位置设置动画，而不是突然更改其值。

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

这里没有诀窍。它全部在代码中，因此请阅读源代码并享受。

于 2013-02-02T16:03:43.400 回答