我从头开始为我的父母编写了一个简单的单页网站,我在英雄下方添加了一个简单的导航菜单,当它滚动到达浏览器顶部时会粘住。它在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;
}
谢谢!
答案 0 :(得分:1)
看起来safari正在经历一段艰难的时期,没有声明宽度的转换,因为它已经声明为固定。试试这个:
.nav
{
width: 100%;
max-width: 1440px;
}
答案 1 :(得分:0)
将width: 100%
添加到.navigation
时,故障就消失了。我无法解释为什么Safari表现得如此古怪。
答案 2 :(得分:0)
出现此问题是因为在添加.nav-fixed
类时添加了新的可动画属性。具体为width
和max-width
。为防止这种情况,您可以添加
width: 100%;
max-width: 1440px;
到.nav
班。