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

Question

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

这是我的jQuery代码

$(window).scroll(function(){
      if ($(this).scrollTop() > 20) {
        $('.menu ').addClass("sticky");
      } 
      else {
        $('.menu').removeClass("sticky");
      }
    });

和我的 CSS 代码

.menu {
    position absolute;
    background: white;
    height: 65px;
}
.menu.sticky {
    position:fixed;
    height: 37px;
    max-width: 480px;
    padding: 0;
    background: white;
}

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

Answer 1

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