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

Answer 2

You will likely be needing to utilize varying scroll position values to determine where you are on the page. The linked question has some good advice for getting these values in jQuery

How do I determine height and scrolling position of window in jQuery?

You would just want an onscroll handler to probably trigger changes in your content like this:

$('body').scroll(function() {
    // determine current scroll position
    var scrollPosition = 0;
    // determine position as per linked question

    // change scroll image based on scroll position, assume this image has id of scrollImage
    var scrollImage = $("#scrollImage");
    if (scrollPosition < 100) {
        scrollImage.attr("src", "http://domain.com/path/to/image");
    } else if (scrollPosition < 200) {
        scrollImage.attr("src", "http://domain.com/path/to/another/image");
    } // etc.
});