Question

第一次发表海报。我首先要说的是，在设计一个我必须编写代码的网站的过程中，我是一名平面设计师。我有最小的javascript / jquery经验。我正在努力弄清楚如何根据网页上的位置显示图像的新部分。

我正在设计一个潜水网站，我正在尝试复制左下方网站中使用的深度定位器。而不仅仅是一个数字，我将获得有关每个深度的认证级别的信息。有关如何使用文本或图像进行此操作的任何建议将根据网页上的位置进行更改。

谢谢！

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

Answer 2

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

How do I determine height and scrolling position of window in 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.
});

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

2 个答案: