IF statements not working correctly on Android Firefox only

I am currently developing a site for family of mine using Drupal. It can currently be viewed (in development) at http://ift.tt/1NeRpR5

It's a responsive website, and my problem occurs only on the Android Firefox browser.

When in mobile view (mobile browser, or tiny browser screen on desktop), scrolling down will change the header colours and images, and clicking the menu button will make the menu appear. (There are some slight css problems on android chrome and android stock browser, but that's of minor concern.)

My main problem is that the jquery that does all this, will not work in my android firefox browser, but works fine in any other browser. I've put it all in a fiddle.

http://ift.tt/1DzCLnn

After hours of searching similar problems, and debugging with alerts, I realized the problem is in the

if ($('.l-header').css('position') == 'fixed' )

statement. If I change that to

if(true)

Firefox also does exactly what it's supposed to do. However, no matter what I change it to ( I've tried to check for #l-navbutton.is(:visible) , I've tried $(window).width functions, but no matter what I do, firefox android apparently does not evaluate them as true, even when all other browsers do.

I'm sure I'm missing something small, but I just can't figure this out. Oddly enough, when I view the fiddle on my android firefox, it works fine, but on my development site (or on my localhost) it won't work.