动态背景滚动

很有趣，谢谢!

我希望你不介意我冒昧地使用百分比，因为我可以可靠地使用浮点数和百分比，这让我的生活更容易一点，也可能让脚本更健壮一点。

我所做的是使布局，html和css符合规则，你需要的bg动画正确，他们基本上保持相同，从你有。

然后，这只是一个计算问题，需要用正确的属性来计算出你离顶部的百分比，*20实际上是由背景图像以百分比填充的"左"空间量(背景高度为80%)。

他们我移动计算到一个函数，所以我可以调用滚动和窗口调整大小，确保它是启动的任何事件，以某种方式修改窗口…

没有做广泛的测试，但它在Chrome中工作，我累了:p

我相信这就是你要找的:

http://jsfiddle.net/sg3s/RSqrw/15/参见edit 2

http://jsfiddle.net/sg3s/RSqrw/52/参见Edit 3

在Chrome, Firefox 3.6, IE9 +兼容模式下功能测试成功

阅读问题再次检查如果我做对了，我注意到我没有完全做你想要的，所以我更新了第一次编辑的链接，它给你一个插件，你可以有几个选项的滚动背景。它保留了我的"旧"解释，同时也做了你想做的事情……

编辑3:

当我今天去工作时，我被我的插件"try"有点臃肿的事实所困扰。正如你在评论中提到的，它不太符合要求。

所以我重写了它，只做你想做的，而不是更多，在Chrome Firefox, IE9 +compat等测试。

你可以选择让背景贴在顶部或底部，如果高度适合窗口。没有别的了，但是这已经足够做一些很酷的事情了:p

确切的解决方案:Fiddle: http://jsfiddle.net/srGHE/2/show/

视图strong>

谢谢挑战。请参阅下面的解决方案，该解决方案符合所有需求，包括推荐的可选功能(以及如何删除这些功能的步骤)。我只显示页面更改的部分，每个部分(CSS, HTML和JavaScript)后面都有解释:

CSS (changes):

html,body{
    margin: 0;
    height: 100%;
    padding: 0;
}
body{
    background-color: #70d4e3;  
}
#background { /*Previously: .background*/
    /*Removed: margin-top: 45px;
      No other changes*/
}
#banner /*Previously: .banner; no other changes */
#content /*Previously: .content; no other changes */
#innerContent /*Previously: .innerContent; no other changes */

CSS修改说明:

背景的
1. margin-top:45px是不必要的，因为你绝对是在定位元素。
2. 所有不太可能出现多次的元素应该通过id (#)选择器选择。这个选择器比类选择器更具体。

HTML (changes):所有的class属性都被id所取代。没有其他改动。不要忘记包含JQuery框架，因为我已经使用JQuery实现了您的愿望。

JavaScript (new):
注意:我添加了一个功能，你没有要求，但似乎合乎逻辑。代码将自动在窗口左侧保留足够的边距，以便始终显示背景。如果你不想要这个功能，请删除标记注释之间的任何内容。

$(document).ready(function(){
    //"Static" variables
    var background = $("#background");
    var marginTop = parseFloat(background.css("margin-top")) || 0;
    var bannerWidth = $("#banner").width(); /*Part of auto left-margin */
    var extraContWidth = (bannerWidth - $("#content").width())/2; /*Same as above*/
    function fixBG(){
        var bodyWidth = $("body").width();
        var body_bg_width_ratio = bodyWidth/1920;
        var bgHeight = body_bg_width_ratio * 926; //Calcs the visible height of BG
        
        var height = $(document).height();
        var docHeight = $(window).height();
        var difHeight = bgHeight - docHeight;
        var scrollDif = $(document).scrollTop() / (height - docHeight) || 0;
        
        /*Start of automatic left-margin*/
        var arrowWidth = body_bg_width_ratio * 115; //Arrow width
        if(bodyWidth - bannerWidth > arrowWidth*2){
            $("body > div").css("margin-left", "auto");
        } else {
            $("body > #banner").css("margin-left", arrowWidth+"px");
            $("body > #content").css("margin-left", (arrowWidth+extraContWidth)+"px");
        }
        /*End of automatic left-margin*/
        
        if(difHeight > 0){
            background.css({top:(-scrollDif*difHeight-marginTop)+"px", bottom:""});
        } else {
            background.css({top:"", bottom:"0"});
        }
    }
    $(window).resize(fixBG);
    $(window).scroll(fixBG);
    fixBG();
});

JavaScript代码说明
背景的大小是通过计算背景和文档的比例宽度来确定的。使用width属性，因为它是最可靠的计算方法。

然后，计算视口、文档主体和背景的高度。如果适用，还会计算滚动偏移量，以便在必要时为背景的移动做准备。

可选，代码决定是否需要调整左边距(以使背景在窄窗口中可见)。

最后，如果背景箭头的高度大于文档的主体，则考虑到滚动位置，背景将相应地移动。箭头从文档的顶部开始，并在用户滚动时向上移动(因此，当用户完全向下滚动时，箭头的底部将是页面的底部)。如果没有必要移动背景，因为它已经很适合，背景将被放置在页面的底部。

当页面加载完成时，此功能被添加到调整大小和滚动事件中，以便背景始终位于正确的位置。

好吧,我不确定我理解你,你为什么要这样做,但是你可以尝试添加2背景(见http://www.css3.info/preview/multiple-backgrounds/),一个顶部与底部bg bg和另一个,但我认为如果页面没有太久会引起问题,所以其他的答案与纯CSS如下:首先添加3水平div宽度的100%。顶部div将有你的顶部bg和它的高度，中间div将是透明和自动高度和底部div将有你的底部bg和它的高度。所有div的z索引都是0。然后创建一个更高的z-indexdiv作为一个容器，你将被设置。如果我没理解错的话，这是我能想到的最接近的方法了。话虽如此，我很确定你可以用JQuery来做这件事，而且效果会更好

使用JQuery，我可以给你我认为你想要的:

$(window).scroll(function() {
    var h = Math.max($(document).height(), $(window).height());
    var bottom = h - $(".background").height() - $(window).height();
    $(".background").css("top", (($(window).scrollTop() / h) * bottom) + "px");
});

编辑:忘了说明scrollTop报告位置的方式。

或者:

.background {
    margin-top: 45px;
    max-width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -9999;
    max-height: 100%;
}

我建议使用jQuery的背景视差http://www.stevefenton.co.uk/Content/Jquery-Background-Parallax/

函数如

$("body").backgroundparallax();

如果你不让它工作就问。

@abney;我理解你的问题可能是你想要的http://jsfiddle.net/sandeep/RSqrw/60/

你只需要CSS:

#background {    
    position: fixed;
    width: 100%;
    height:100%;
    top: 0;
    left:0;   
    z-index: -1;
}

你的问题的解决方案是一个漂亮的小轻量级插件由Scott Robin。您可以通过访问他的项目页面获得更多信息，下载它，并使您的所有项目更轻松。