js滚动平滑

Question

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

我正在尝试在顶部粘贴导航.当$(window).scrollTop()通过导航前的点时,棒效应将被处理.

问题是,IE和Chrome上会出现"眨眼"效果(类似延迟过程)但Firefox上没有.

在我的研究中,我知道Firefox默认情况下是"平滑滚动".

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

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

就像在Firefox上一样流畅,代码就是那么简单......

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

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

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, 。yx

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