Javascript 做一个平滑的卷轴

Javascript 做一个平滑的卷轴,javascript,jquery,css,scroll,Javascript,Jquery,Css,Scroll,我真的有一个关于卷轴事件的问题。我整晚都想解决这个问题,但我解决不了 我正在尝试在顶部粘贴导航。当$(窗口)滚动顶部()在导航前通过该点时,将处理棍子效果 问题是,在IE和Chrome上会有“闪烁”效应(类似于延迟过程),但在Firefox上不会 在我的研究中,我知道Firefox默认具有“平滑滚动” 但是,请在Chrome或IE上查看此示例 它像Firefox一样平滑,代码就是这么简单 关键是,我正在做与这个例子完全相同的事情,但为什么我会有“眨眼”效果 是CSS的诀窍吗??? 有没有办法创

我真的有一个关于卷轴事件的问题。我整晚都想解决这个问题,但我解决不了

我正在尝试在顶部粘贴导航。当
$(窗口)滚动顶部()
在导航前通过该点时,将处理棍子效果

问题是,在IE和Chrome上会有“闪烁”效应(类似于延迟过程),但在Firefox上不会

在我的研究中,我知道Firefox默认具有“平滑滚动”

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

它像Firefox一样平滑,代码就是这么简单

关键是,我正在做与这个例子完全相同的事情,但为什么我会有“眨眼”效果

是CSS的诀窍吗???

有没有办法创建一个平滑的scrool,就像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', });
};

查看不完整的示例代码,很难确定发生了什么,因此请使用完整的代码更新您的问题,或者更好-上传一个示例作为示例,我们可以通过必要的更改直接更新它。到目前为止(根据我之前所说的),由于示例代码中的拼写错误,您似乎得到了一种闪烁的效果:

? nav.css({ 'position': 'fixed', 
                  'z-index': z_index, 
                   top: y, 
                   left: x, })
: nav.css({ 'position': 'static', });
? 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', });
? nav.css({ 'position': 'fixed', 
                  'z-index': z_index, 
                   'top': y, 
                   'left': x })
: nav.css({ 'position': 'static' });
当然,前提是您已经预先设置了变量
z_index
y
x


编辑和免责声明:我用原始演示代码创建了一个新的。你提到的演示是受版权保护的,所以请将你的感激之情归于原作者,而不是我,如果这对你有帮助的话。不过,我发布的代码可以免费下载。所以我想,为了演示的目的也可以重用它。更改该代码以符合您的要求,并在每次更新时将其更新为新版本。它将帮助你追踪你做错了什么(如果有)

我想你可能混淆了两件事

  • 查看链接到的工作代码。如果您使用鼠标滚动器在chrome、IE或firefox上滚动,就会出现闪烁
  • 眨眼是因为你突然改变了位置。尝试更改js,使其设置位置动画,而不是突然更改其值
  • 正如其他人所说,链接到一个工作代码并通过展示一个技巧来期待答案可能对我们所有人都没有帮助。尝试在js的位置更改线上添加动画,看看是否有帮助


    这里没有诡计。这一切都在代码中,所以请阅读源代码并尽情享受。

    也许你应该发布你正在做的不起作用的事情。也许你应该只使用你链接的一个,它已经起作用了?我不能实现同样的事情…我更想知道诀窍。@Samuel Edwin Ward,我已经更新了我的代码你所说的“闪烁效应”到底是什么意思?可能问题是您正在将元素从静态定位移动到固定定位。通过这样做,元素占用的空间被移除,因此它下面的所有内容都会向顶部移动一点。看看这个。您不必设置菜单的动画,您可以设置页面的动画以将其取回,使菜单位于顶部。你可以看看发布的JSFIDLE,看看在chrome中使用滚动条和鼠标滚动是否对你和你的实际代码都不同。