首页 文章

js滚动平滑

提问于
浏览 次
5

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

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

问题是，IE和Chrome上会出现“眨眼”效果（类似延迟过程）但Firefox上没有 .

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

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

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

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

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

Is the trick on CSS ??

Is there any way that I can create a smooth scrool like what on firefox by js??

非常感谢您的帮助 .

$(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', });
};
javascript jquery css scroll

2 回答

  • 1

    我想你可能会在这里混淆两件事 .

    • 查看您链接到的工作代码 . 如果你使用鼠标滚动滚动chrome或IE或firefox，那里就会闪烁 .

    • 眨眼是因为你突然改变位置 . 尝试更改js，使其为位置设置动画，而不是突然改变其值 .

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

    这里没有诀窍 . 它的全部代码所以阅读源和享受 .

    回复于
  • 1

    查看不完整的示例代码's really hard to determine what'正在进行中，所以请使用完整代码更新您的问题，或者更好 - 上传JSFiddle为我们提供示例，我们可以通过必要的更改直接更新它 . 到目前为止（基于我之前所说的），由于 typos in your example code ，你看起来像是在受到 flickering 的影响：

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

    在哪里're not terminating the array of CSS properties and values that needs to be applied (you'用逗号 , 结束它，并且你没有在单引号中包含一些CSS属性 ' . Your code should be ：

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

    那个's of course provided you'已经预先设置变量 z_index ， y 和 x .

    EDIT & DISCLAIMER: 我用原始演示代码创建了一个新的JSFiddle . 您提到的演示版权受版权保护，所以请将您的感谢归功于原作者，而不是我，如果这可以帮助您 . 我发布的代码JSFiddle可以免费下载 . 所以我认为它做错了（如果有的话） . ;）

    回复于

相关问题