jQuery Slide Down Opacity on Scroll Slow in Firefox

[ShagenBake]

I hope that I am posting in the right place. I have a project working for a client in which the header area will go solid from opaque after scrolling down a certain number of pixels. In the case of the Pen I will reference it is 200 pixels. In Chrome, IE, Safari it is working properly or at least quite better than in Firefox. Sometimes it works but is very delayed in Firefox and other times it takes a bit of scrolling up and down an few times to make it work properly.

Any help with my jquery, etc. would be super helpful. It could be a combination of Jquery and CSS but I think most of the problem lies with the jQuery. Thanks in advance for any time, effort or thought you might put into this.

[Here is my pen…](http://codepen.io/ShagenBake/pen/gucIs “jqeury Header Opaque to Solid on Scroll”)

[Paulie_D]

>solid from opaque

Wait…aren’t they the same thing?

I get the same issue in FF.

I’m wondering whether just adjusting the CSS property (with timing) might not be a better option…but jQ is **not** in my wheelhouse.

[ShagenBake]

Have a look at it in Chrome or another browser. The idea is for the header background to be transparent and show the gradient image when on top of the slider and when you have scrolled past it then it will change to a solid color. It is supposed to work and function exactly like the Hule header/navigation. Thanks for the reply Paulie_D

[Author]

Posts