How to implement scrolling image with javascript in web page

/*by Jiangong SUN*/

I want to implement a scrolling section in web page. 

The height of left part is fixed, the right part is variable and a scrolling section inside.

Here is the page structure:

JS code :

$(document).ready(function () {
            $window = $(window), //window object
            $ImageToRight = $(".ImageToRight"), //Image to scroll
            $contenuTextoLeft = $(".contenuTextoLeft"), // left part with fixed height
            $contenuTextoRight = $(".contenuTextoRight"); //variable right part depending the scrolling image
            var elTop = $ImageToRight.offset().top; //image top position
            var clTop = $contenuTextoLeft.offset().top; //left part top position

            $window.scroll(function () {
                var windowTop = $window.scrollTop();
                if (windowTop >= elTop && windowTop <= clTop + $contenuTextoLeft.height() - $ImageToRight.height()) {
                    var pos = windowTop - elTop;
                    $ImageToRight.stop()
                            .animate(
                                 { "marginTop": pos + "px" }, "slow");
                } else if (windowTop < elTop) {
                    $ImageToRight.stop()
                            .animate(
                                 { "marginTop": 0 + "px" }, "slow");
                }
            });
 });

That's all!