javascript - 基于滚动显示图像的新部分

Question

第一次海报。我应该首先说我是一名平面设计师，正在设计一个我必须编写代码的网站。我有最少的 javascript/jquery 经验。我在尝试弄清楚如何根据网页上的位置显示图像的新部分时遇到麻烦。

我正在设计一个水肺潜水站点，我正在尝试复制下方网站左侧使用的深度定位器。我将获得与每个深度的认证级别相关的信息，而不是只有一个数字。关于如何使用文本或图像执行此操作的任何建议，这些文本或图像将根据网页上的位置发生变化。

http://lostworldsfairs.com/atlantis/

谢谢!

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>

这是带有一些测试数据和用于测试的 html 的脚本 :) 它有效