5

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!

4

2 回答 2

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 的脚本 :) 它可以工作

于 2012-09-04T19:36:15.027 回答
0

您可能需要利用不同的滚动位置值来确定您在页面上的位置。链接的问题对于在 jQuery 中获取这些值有一些很好的建议

如何确定 jQuery 中窗口的高度和滚动位置？

您只需要一个 onscroll 处理程序来触发您的内容更改，如下所示：

$('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.
});
于 2012-09-04T19:30:19.570 回答