动态背景滚动

Question

这是我将要提到的内容的链接。

我在使背景图像按我希望的方式工作时遇到一些问题。

我希望背景根据窗口的宽度自动调整大小，它已经正确执行了。如果你把窗口变小，你会看到背景也随之缩小。

问题就在这里。如果您将窗口设置得宽（短），那么背景将调整大小并变得太高，因此您将无法再看到背景的顶部（因为背景位于底部）。 当您位于页面顶部时，我希望背景位于顶部位置，当您向下滚动时，它会慢慢移动到底部位置。有点像 Android 手机背景的效果你左右移动。当然，请记住，当您缩小窗口时，我仍然希望背景自动调整大小。

html {
  background-color: #70d4e3;
  height: 100%;
}

body {
  height: 100%;
}

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

.banner {
  margin: 0px auto;
  width: 991px;
  margin-bottom: -9px;
}

.content {
  background: url("http://i.imgur.com/daRJl.png") no-repeat scroll center center transparent;
  height: 889px;
  margin: 0 auto;
  width: 869px;
}

.innerContent {
  padding: 30px;
}

<img src="http://i.imgur.com/6d5Cm.jpg" alt="" class="background" />

<div class="banner">
  <img src="http://i.imgur.com/JptsZ.jpg" alt="" />
</div>
<div class="content">
  <div class="innerContent">
    testing
  </div>
</div>

也许需要一些 javascript 或 jquery 来实现这一点。

Answer 1

嗯，这很有趣，谢谢！

我希望您不介意我冒昧地使用百分比来让我的生活更轻松一些，并且可能使脚本稍微更健壮，因为我可以可靠地使用带有百分比的浮点数。

我所做的就是使布局、html 和 css 符合背景正确动画所需的规则，它们与您所拥有的基本相同。

然后，这只是一个计算所需的正确属性的问题，以计算出您距离顶部的百分比，*20实际上是“左边”要填充的空间量背景图像的百分比（背景高度为 80%）。

他们我将计算转移到一个函数中，这样我就可以在滚动和窗口调整大小时调用它，确保它在任何以某种方式修改窗口的事件上启动......

没有进行广泛的测试，但它在 Chrome 中工作，我是累了：p

我相信这就是您正在寻找的：

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

如果您想以其他方式实现这一点，只需将页面背景设置为从顶部开始修改：

http://jsfiddle.net/sg3s/RSqrw/14/ 请参阅编辑2

编辑：

作为奖励，由于我从未真正将 jquery 脚本编写为“插件”，所以我决定将其转换为一个。我想出的应该很容易实现和使用！

http://jsfiddle.net/sg3s/RSqrw/52/ 请参阅编辑 3

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

编辑 2：

再次阅读问题，检查是否我做得对，我注意到我没有完全做到你想要的，所以我更新了第一次编辑中的链接，它为你提供了一个插件，在其中你可以有多个滚动背景选项。它保留了我的“旧”解释，同时也做你想做的事情...阅读代码中的注释以获取一些额外的描述。

编辑 3：

当我今天去上班时，我对事实上，我的插件“尝试”有点臃肿。正如您在评论中提到的，它不太符合要求。

所以我重写了它，只做你想做的事情，而没有做更多的事情，在 Chrome Firefox、IE9 +compat 等中进行了测试。这个脚本更加干净。

http://jsfiddle.net/sg3s/vZxHW/

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

Answer 2

确切的解决方案：小提琴： http://jsfiddle.net/srGHE/2/show/

查看来源

感谢您的挑战。请参阅下文了解解决方案，该解决方案符合所有要求，包括推荐但可选的功能（以及如何删除这些功能的步骤）。我只显示页面中已更改的部分，并在每个部分（CSS、HTML 和 JavaScript）后提供说明：

CSS（更改）：

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（更改）：
所有 class 属性均已替换为 id。没有进行其他更改。不要忘记包含 JQuery 框架，因为我已经实现了您的希望使用 JQuery。

JavaScript（新）：
注意：我添加了一个您没有请求的功能，但看起来很合乎逻辑。代码会自动在窗口左侧保留足够的边距，以便始终显示背景。如果您不需要此功能，请删除标记注释之间的任何内容。

$(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 属性，因为它是最可靠的计算方法。

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

可选，代码确定是否有必要调整左边距（以保持背景在窄窗口中可见）。

最后，如果背景箭头的高度大于文档正文，则背景会相应移动，同时考虑滚动位置。箭头从文档顶部开始，并随着用户滚动而向上移动（这样，当用户完全向下滚动时，箭头的底部将成为页面的底部）。如果不需要移动背景，因为它已经很适合，则背景将位于页面的底部。

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

如果您还有任何其他问题，请随时询问他们。

Answer 3

好吧，我不确定我是否理解你以及你为什么要这样做，但你可以尝试添加 2 个背景（请参阅 http://www.css3.info/preview/multiple-backgrounds/ ），一个带有顶部背景，另一个带有底部背景，但我认为如果页面不是太时间长了就会出问题所以纯 CSS 的另一个答案如下：首先添加 3 个宽度为 100% 的水平 div。顶部 div 将具有您的顶部背景及其高度，中间 div 将是透明的且自动高度，底部 div 将具有您的底部背景及其高度。所有 div 的 z-index 均为 0。然后创建一个更高的 z-index div 作为容器，然后就完成了。如果我正确理解你的问题，这就是我能想到的实现这一目标的最接近的结果。话虽这么说，我很确定你可以使用 JQuery 来做到这一点，并获得更好的结果

Answer 4

使用 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");
});

编辑：忘记考虑滚动顶部报告位置的方式。

Answer 5

或者也许：

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

}

Answer 6

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

该功能非常简单，

$("body").backgroundparallax();

如果您无法使用它，请询问。

Answer 7

@阿布尼；据我了解你的问题可能就是你想要的 http://jsfiddle.net/sandeep/RSqrw/60/< /a>

你只需要 css 即可：

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

Answer 8

您的问题的解决方案是 Scott Robin 的一个不错的小型轻量级插件。您可以访问他的项目页面 此处。