Question

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

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

这是小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;
}

谢谢！

Answer 1

看起来safari正在经历一段艰难的时期，没有声明宽度的转换，因为它已经声明为固定。试试这个：

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

Answer 2

将width: 100%添加到.navigation时，故障就消失了。我无法解释为什么Safari表现得如此古怪。

Answer 3

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

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

到.nav班。

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

3 个答案: