4

我创建了一个通过滚动移动到当前窗口位置的菜单。当我立即上下滚动时，有时会在带有 OS X 10.9 和 Windows 7 的 Chrome 30 上出现故障。悬停后，锚标签会跳到正确的位置（向上 1 个像素）。我的代码有什么问题吗？这是一个已知的错误？

检查这个JSFiddle 演示！

$(document).ready(function(){
  $(window).scroll(function(){
    var newTop = ($(window).scrollTop() + 40) +'px';
    $('#menu').stop().animate({ top: newTop}, 500);
  });
});

毛刺

编辑：它已在 Chrome 31 中修复。

4

2 回答 2

3

我同意亚当，这绝对是一个渲染错误。如果您使用translate()转换功能为菜单设置动画，则不会发生。

使用这种方法还有其他好处：http: //www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

jQuery 核心不允许您使用translate()开箱即用的动画，但有一个插件可以在http://ricostacruz.com/jquery.transit/上启用此功能，或者您可以选择使用.css()并让css 转换完成繁重的工作.

这是使用插件的示例：

var menu = $("#menu");
$(window).scroll(function(){
    var newTop = $(window).scrollTop();
    menu.stop().transit({ y: newTop +'px' }, 500);
});

插件演示在http://jsfiddle.net/Hb3jS/5/

这是一个使用CSS 过渡的示例：

js

var menu = $("#menu");
$(window).scroll(function(){
    var newTop = $(window).scrollTop();
    menu.css({ transform: 'translateY(' + newTop +'px)' });
});

css

#menu { 
    transition: all .5s;
}

在http://jsfiddle.net/Hb3jS/6/上的 CSS 演示

于 2013-11-15T08:51:07.220 回答
3

我相当肯定这是一个渲染错误，因为：

  1. 手动触发重绘会导致故障消失。
  2. 在我测试的其他浏览器中不会出现故障。

幸运的是，触发重绘是一种相当直接的解决方法，尽管很烦人：

我为动画添加了回调：

$('#menu').stop().animate({ top: newTop }, 500, function(){
  $('#menu').css('overflow', 'hidden');
  setTimeout(function(){
    $('#menu').css('overflow', 'auto');
  }, 10);
});

jsFiddle 演示

不幸的是，似乎某些属性的设置和取消设置（这里我选择了overflow）都是必要的。这10有点粗略，但是当您解决浏览器渲染错误时，我不确定您是否可以做得更好。

祝你好运！

于 2013-11-15T06:28:53.360 回答