I created a unique, single-page website for my parents completely from scratch. I included a sleek navigation menu right below the hero section that sticks to the top of the browser upon scrolling. The functionality is flawless in both Chrome and Firefox.
However, when viewing the site in Safari, I noticed a peculiar issue with the navbar. While the stick-on-scroll feature works fine, everything inside the Navbar seems to re-animate in from the left.
If you'd like to take a look at the website, you can visit it here:
Below are snippets of the jQuery script and CSS code that I used:
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;
}
Your input would be greatly appreciated!