Parallax effect is interfering with smooth scrolling effect

Question

Okay, so I fixed the smooth scrolling problem by taking all the content out of the container div "box" and having the java call scrollbar data from (window) -- and got the parallax working in firefox by adding -moz-transform instead of just using webkit, thanks ahren –

I've been working on redesigning a net-label to have a parallax effect. Here is a link to what I've done so far:

http://www.sasparillarootcoyote.com/parallax_experiment/index2.html ( Link unavailable )

I've gotton the parallax effect to work exactly how I want it to, only to find that it doesn't work at all in firefox. Anyone have any ideas about how I can fix this without using an entirely different method to create the parallax effect?

Here's the parallax script -- I'm using JQuery 8.1.3

<script>

    $(document).ready(function () {

        $("#box").scroll(function () {
            s = $("#box").scrollTop();
            $("#hideedges").css("-webkit-transform","translateY(" +  (s/1)  + "px)");
            $("#thumb1").css("-webkit-transform","translateY(" +  (s/1.6)  + "px)");
            $("#thumb2").css("-webkit-transform","translateY(" +  (s/2)  + "px)");
            $("#thumb3").css("-webkit-transform","translateY(" +  (s/4)  + "px)");
            $("#thumb4").css("-webkit-transform","translateY(" +  (s/24)  + "px)");
            $("#thumb5").css("-webkit-transform","translateY(" +  (s/50)  + "px)");
            $("#thumb6").css("-webkit-transform","translateY(" +  (s/16)  + "px)");
            $("#thumb7").css("-webkit-transform","translateY(" +  (s/24)  + "px)");
            $("#thumb8").css("-webkit-transform","translateY(" +  (s/9)  + "px)");
            $("#thumb9").css("-webkit-transform","translateY(" +  (s/3)  + "px)");
            $("#thumb10").css("-webkit-transform","translateY(" +  (s/44)  + "px)");
            $("#thumb11").css("-webkit-transform","translateY(" +  (s/9)  + "px)");
            $("#thumb12").css("-webkit-transform","translateY(" +  (s/500)  + "px)");
            $("#thumb13").css("-webkit-transform","translateY(" +  (s/24)  + "px)");
            $("#thumbcolor13").css("-webkit-transform","translateY(" +  (s/1.6)  + "px)");
            $("#thumbcolor1").css("-webkit-transform","translateY(" +  (s/2)  + "px)");
            $("#thumbcolor2").css("-webkit-transform","translateY(" +  (s/4)  + "px)");
            $("#thumbcolor3").css("-webkit-transform","translateY(" +  (s/24)  + "px)");
            $("#thumbcolor4").css("-webkit-transform","translateY(" +  (s/50)  + "px)");
            $("#thumbcolor5").css("-webkit-transform","translateY(" +  (s/16)  + "px)");
            $("#thumbcolor6").css("-webkit-transform","translateY(" +  (s/24)  + "px)");
            $("#thumbcolor7").css("-webkit-transform","translateY(" +  (s/9)  + "px)");
            $("#thumbcolor8").css("-webkit-transform","translateY(" +  (s/100)  + "px)");
            $("#thumbcolor9").css("-webkit-transform","translateY(" +  (s/44)  + "px)");
            $("#thumbcolor10").css("-webkit-transform","translateY(" +  (s/9)  + "px)");
            $("#thumbcolor11").css("-webkit-transform","translateY(" +  (s/500)  + "px)");
            $("#thumbcolor12").css("-webkit-transform","translateY(" +  (s/24)  + "px)");

        })

    })

</script>

Thanks for the help guys

Answer 1

Adding

position: fixed;
top: 0;

to your #one img will keep the image on the screen at all times.