Question

不确定这是否可行，我试图在html页面上放置一个新颖的类型文档，我希望每个章节的背景保持不变，但是一旦它们向下滚动到下一章，背景需要改变到那一章（改变可能是即时或顺利无关紧要的）

任何提示？

Answer 1

看看scrollTop()通过JQuery计算当前的观看位置：http://api.jquery.com/scrollTop/

简单演示：http://jsfiddle.net/AlienWebguy/rpCEr/

以下是应用了淡化动画的相同演示：http://jsfiddle.net/AlienWebguy/rpCEr/1/

Answer 2

当然使用jQuery库...

在页眉或页脚中包含jquery库...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

然后在上面的脚本之后包含这个块......

    <script type="text/javascript">
    $(document).ready(function(){
        bg.init();

        $(window).scroll(function(){        
                bg.updateBG();
        });
    });

    var bg = {
    current_image: 'chapter_1',
    offsets: new Array(),
    init: function(){
        $('.chapter').each(function(){
            bg.offsets.push($(this).height());
        });
    },
    updateBG: function(){
        var offset = $(window).scrollTop();
        var total = bg.offsets.length;
        var current_image;
        var chapter = 1;

        for(var i = 0; i < total; i ++)
        {
            if(offset > bg.offsets[i])
            {
                chapter = (i + 1);
                current_image = 'chapter_' + chapter;
                // this will leave the last image overwrite as the current image
            }
        }

        if(current_image != bg.current_image)
             {
                  $('body').css('background', 'url(/path-to-image/' + current_image + '.jpg) no-repeat center center');
                  bg.current_image = current_image;

                  // only update if a change is noticed
             }
        }
    };
        </script>

这里有一个样本html来理解这个错综复杂的JS ......

<div id="container">
    <div class="chapter" id="chapter_1">
        some content
    </div>
    <div class="chapter" id="chapter_2">
        some content
    </div>
    <div class="chapter" id="chapter_3">
        some content
    </div>
</div>

显然，您的内容位于#container元素中。此外，更新实际图像的路径。有更平滑的转换方式，但您可以决定如何做，然后询问具体细节。

此外，窗口高度除以2是为了在底部的页面中间交换图像。对于我用过的项目，我发现这种方式更顺畅。

Answer 3

您可以使用JavaScript获取当前滚动位置，章节元素的偏移量，并相应地更改背景。（请注意，此代码不是跨浏览器 - 您需要对完整的IE兼容性进行一些更改）

http://jsfiddle.net/minitech/9LYpA/

网页使背景保持不变，直到向下滚动足够远

3 个答案: