JavaScript实现平滑滚动

Question

我有一个关于滚动事件的问题。我试了一整晚也没解决。

我正在尝试将导航条固定在顶部，当 $(window).scrollTop() 滚动到导航条前面时启用固定效果。

问题是，在IE和Chrome浏览器中会出现“闪烁”效果（就像延迟处理），但在Firefox浏览器中却没有。

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

请检查这个示例，在Chrome或IE上，它如同在Firefox上一样平滑：

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

这只是非常简单的代码......

问题是，我正在做与这个示例完全相同的事情，但为什么我会出现“闪烁”效果？

问题出在CSS里吗？

是否有任何方法可以通过js创建像Firefox上一样的平滑滚动效果？

非常感谢您的帮助。

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

- Micah

---

也许你应该发布一下你的代码，看看哪里出了问题。 - Samuel Edwin Ward

也许你应该直接使用你已经链接的那个，它已经可以工作了？ - leftclickben

我无法实现相同的东西...我更想知道诀窍... - Micah

@Samuel Edwin Ward，我已更新我的代码。 - Micah

“闪烁效果”具体指什么？也许问题在于将元素从静态定位移动到固定定位。这样做会移除元素占用的空间，因此，其下面的所有内容都会向上移动一点。 - pimvdb

Answer 1

看着这个不完整的示例代码，很难确定发生了什么事情，请更新您的问题并提供完整的代码，或者更好的做法是上传一个JSFiddle作为示例，我们可以直接在上面进行必要的更改。到目前为止（基于我之前所说的），看起来你正在经历由于示例代码中的拼写错误而导致的闪烁效果：

? 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。

编辑与免责声明：我创建了一个新的JSFiddle，其中包含原始演示代码。您所参考的演示受版权保护，请感谢原作者而非我。我发布的代码JSFiddle可供免费下载。因此，我想重用它进行演示也是可以的。将该代码更改为符合您要求的代码，并在每次更新时更新到新版本。这将帮助您跟踪是否出现问题。 ;)

- TildalWave

Answer 2

我认为你可能将两件事混淆了。

1. 查看您链接的工作代码。如果您使用鼠标滚轮在Chrome、IE或Firefox上滚动，那么其中会有一个闪烁。

2. 闪烁是因为您突然改变了位置。尝试更改js，使其动画化位置，而不是突然更改其值。

正如其他人所说，链接到工作代码并期望通过展示技巧来获得答案可能无法帮助我们所有人。尝试在js的位置更改行上添加动画，看看是否有所帮助。

这里没有什么诀窍。一切都在代码中，阅读源代码并享受。

- Farrukh Subhani

---

看这里。您不必对菜单进行动画处理，可以对页面进行动画处理，将其移回以使菜单位于顶部。就像在返回顶部时所做的那样。 - Farrukh Subhani

你能否看一下发布的 jsfiddle，并在 Chrome 中查看是否使用滚动条和鼠标滚轮对您和您的实际代码也有所不同。 - Farrukh Subhani