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

时间:2016-07-01 18:52:38

标签: javascript jquery html css

我从头开始为我的父母编写了一个简单的单页网站,我在英雄下方添加了一个简单的导航菜单,当它滚动到达浏览器顶部时会粘住。它在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;
}

谢谢!

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

.nav班。