Show new portion of an image based on scrolling

Question

First time poster. I should start off by saying that I'm a graphic designer in the process of designing a website that I will have to code. I have minimal javascript/jquery experience. I'm having troubles trying to figure out how a new part of an image is revealed based on the location on a web page.

I'm designing a scuba diving site and I'm trying to replicate the depth locator used in the website below, on the left hand side. Instead of having just a number I'll have information pertaining to certification levels at each depth. Any suggestions on how to go about doing this with either text or an image that will change based on the location on the web page.

http://lostworldsfairs.com/atlantis/

Thanks!

Answer 1

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>

    var depths = [1500,4000,7000];
    var words = ['shallow','medium','deep','darkness'];

    $(document).ready(function() {

        $(window).scroll(function() {
        var depth = Math.floor($(window).scrollTop());

        for(i in depths){

            if(depth<depths[i]){
            $("#depth-o-meter").html(words[i]);
            break;
            }

        }


        });

    });

</script>

<div style = 'position:fixed' ><span id = 'depth-o-meter' >aaa </span></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

this is the script with some testing data and html for testing :) it works