Geek asks and answers

Show a new part of a scroll based image

The first poster. I have to start by being a graphic designer in developing a website that I will have to code. I have minimal javascript / jquery. I'm having trouble trying to figure out how the new part of the image will be displayed, based on the location on the web page.

I am developing a diving site, and I am trying to replicate the depth locator used on the website below, on the left side. Instead of having only a number, I will have information related to the certification levels at each depth. Any suggestions on how to do this with text or an image that changes depending on the location on the web page.

http://lostworldsfairs.com/atlantis/

Thank!

+5
source share
2 answers
<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 a script with some test data and html for testing :) it works

+1
source

You will probably need to use different scroll position values ​​to determine where you are on the page. A related question contains some useful tips for getting these values ​​in jQuery

How to determine the height and scroll position of a window in jQuery?

You just need the onscroll handler to be able to trigger changes to your content as follows:

$('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.
});
0
source

More articles:


All Articles