滚动上的粘性导航在 Safari 中表现得很奇怪答案

【问题标题】：Sticky nav on scroll acting weird in Safari滚动上的粘性导航在 Safari 中表现得很奇怪
【发布时间】：2016-07-02 03:08:53
【问题描述】：

我从头开始为我的父母编写了一个简单的单页网站，并在英雄下方添加了一个简单的导航菜单，当它滚动到浏览器顶部时，该菜单就会出现。它在 Chrome 和 Firefox 中完美运行。

在 Safari 中，滚动部分的棒子可以正常工作，但导航栏中的所有内容都会做这个奇怪的事情，它会从左侧重新动画。

这里是网站：http://firstfruitsllc.com

这是小 jQuery 脚本和 CSS：

var mn = $(".nav");
mns = "nav-fixed";
hdr = $('header').height();

$(window).scroll(function() {
  if ($(this).scrollTop() > hdr) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

.nav {
  border-bottom: 2px solid #eee;
  position: relative;
  background: white;
  height: 100px;
  margin-bottom: -100px;
  box-sizing: border-box;
  overflow: hidden;
  transition: 0.2s ease-in-out;
}
.nav-fixed {
  z-index: 999998;
  width: 100%;
  max-width: 1440px;
  position: fixed;
  top: 0;
  transition: 0.2s ease-in-out;
  -webkit-box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.08);
}
.nav-fixed:before {
  z-index: 999999;
  content: '';
  display: block;
  position: absolute;
  width: 150px;
  height: 50px;
  top: 25px;
  left: 25px;
  background-image: url('https://dl.dropboxusercontent.com/s/uezydedqpo55ub2/first-fruits-logo-color.svg?raw=1');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.5s ease-in-out;
}

谢谢！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

看起来 safari 在从没有宽度被声明到同时声明为固定宽度的过渡方面遇到了困难。试试这个：

.nav
{
    width: 100%;
    max-width: 1440px;
}

【讨论】：

谢谢！从 .nav-fixed 中取出这些行并将它们放入 .nav 就可以了。

【解决方案2】：

出现此问题的原因是在添加 .nav-fixed 类时添加了新的动画属性。特别是width 和max-width。为了防止这种情况，您可以添加

width: 100%;
max-width: 1440px;

到.nav 类。

【讨论】：

太棒了，你们都是对的。非常感谢！

【解决方案3】：

当您将width: 100% 添加到.navigation 时，故障就消失了。我无法解释为什么 Safari 的行为如此奇怪。

【讨论】：