jquery - 如何修复移动版 chrome 中关于固定位置的错误。以及 firefox 和 chrome 之间的区别

Question

在移动版 firefox 中一切正常。在 chrome 中有固定定位的错误。当我滚动时，标题必须将绝对更改为固定，高度从 65 到 35 像素。但它闪烁。 我是网络开发的新手。这是我的第一个静态 web site . 我正在使用 jquery 插件 skrollr。

这是我的 jquery 代码

$(window).scroll(函数(){
      如果 ($(this).scrollTop() > 20) {
        $('.menu').addClass("sticky");
      }
      别的 {
        $('.menu').removeClass("sticky");
      }
    });

和我的 CSS 代码

.menu {
    绝对位置；
    背景:白色；
    高度:65px；
}
.menu.sticky {
    位置:固定；
    高度:37px；
    最大宽度:480px；
    填充:0；
    背景:白色；
}

请帮助已经一周无法解决这个问题。

Answer 1

在.menu 类中使用transition:all 0.4s ease-in-out。您可以根据需要调整过渡延迟。还有一个你不需要为此添加任何插件。您可以使用小的 jquery 代码和 CSS3 动画轻松处理这个问题。