JohnDoeTheFifth JohnDoeTheFifth - 3 months ago 13
CSS Question

Javascript not working in IE and Firefox, works fine in Chrome

So my navigation bar is using a (badly written I must say if someone can help me write it better by the way) javascript code to have it reduce in size when scrolling down.

It works fine in Chrome but doesnt activate in Firefox and IE.

I suspect it because the height is set in the css file, but I have to set it in css for it to look right. Although I am most likely wrong.

Here is the JS:

<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 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;
}
.logo-bold {
font-family: 'Ubuntu', sans-serif;
font-size: 22px;
color: #535353;
font-weight: 500;
}
.logo-thin:hover {
cursor: url(../img/cursor-black.png) 20 20, move;
}
.logo-bold:hover {
cursor: url(../img/cursor-black.png) 20 20, move;
}
#nav {
list-style-type: none;
width: auto;
float: right;
position: relative;
color: #5B5B5B;
margin-top:27px;
}
#nav .current a {
color: #49E2D6;
}
#nav a:hover {
color:#49E2D6;
cursor: url(../img/cursor-black.png) 20 20, move;
}
#nav li {
float: left;
position:relative;
top:7px;
}
#nav a {
text-transform: uppercase;
background-position: right;
padding-right: 10px;
padding-left: 10px;
display: block;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
font-weight: 400;
color: inherit;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.nav-seperator {
position:relative;
top:-4px;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
font-weight: 400;
}


Cheerios.

EDIT: And here is the website: http://www.onepixelroom.com/droninrenovations/

Answer

Change

$('body').scrollTop()

to

$(window).scrollTop()

This is usually the recomended way to retrieve the scroll position of the window's content (and so the body as well).

Also I'd suggest to put everything inside the

$(document).ready(function(){
//
});

block. I mean, also the binding of the scroll event to the navbar resize function.

As a side note jQuery allows you to write the above block (with same funcionality) as

$(function() {
//
});
Comments