I have a navigation bar that uses JavaScript code to shrink in size when scrolling down. The code seems poorly written and I would appreciate any help in improving it.
While the functionality works well in Chrome, it fails to activate in Firefox and IE.
I suspect this issue may be due to the height being set in the CSS file, but changing it there is necessary for the design to appear correctly. However, I could be mistaken.
Below is the JavaScript code:
<script type="text/javascript">
$(document).ready(function(){
$('#nav-background').data('size','big');
});
$(window).scroll(function(){
var $nav = $('#nav-background');
if ($('body').scrollTop() > 0) {
if ($nav.data('size') == 'big') {
$nav.data('size','small').stop().animate({
height:'60px'
}, 200);
$("#nav").animate({margin: "17px 0px 0px 0px"}, 200);
$(".smoothScroll").animate({margin: "17px 0px 0px 0px"}, 200);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').stop().animate({
height:'80px'
}, 200);
$("#nav").animate({margin: "27px 0px 0px 0px"}, 200);
$(".smoothScroll").animate({margin: "27px 0px 0px 0px"}, 200);
}
}
});
</script>
And here is the corresponding CSS:
#nav-background {
position: fixed;
width: 100%;
background-color: #FFFFFF;
z-index: 1000;
height:80px;
}
#nav-bar {
margin: 0 auto;
width: 90%;
height:100%;
max-width:1070px;
}
.smoothScroll {
text-decoration: none;
color: inherit;
position: relative;
text-align: left;
width:auto;
float:left;
margin-top:27px;
}
.logo-thin {
font-weight: 300;
color: #5B5B5B;
font-family: 'Ubuntu', sans-serif;
font-size: 22px;
}
/* More styles... */
To view the website, visit: