Question

我正在寻找有关继续研究的建议。我正试图在这个网站上创建一个不同的滚动行为 - http://schipperbros.com。 “工作”部分中的图像滑块和白色“关于”部分将被固定，而蓝色介绍部分，橙色徽标部分和最后一部分“联系”将自由滚动。

我基本上希望它像这个网站http://https://codyhouse.co/demo/alternate-fixed-scroll-background/index.html一样工作。我网站的固定部分就像本网站的图片一样。这个网站使用背景附件：固定，但我不相信我可以使用它，因为我的固定区域不只是一个图像 - 我的一个部分是图像滑块，另一个是复制。

任何想法我可以实现的方法或我可以寻找的方向将是非常有帮助的。谢谢你！

Answer 1

首先让我告诉你你希望实现的目标是视差滚动效果。你可以找到很多资源。

现在回答你原来的问题，有些网站使用纯css来实现视差滚动。试试这个

http://keithclark.co.uk/articles/pure-css-parallax-websites/

关键是使用CSS3转换。您可以参考http://www.w3schools.com/css/default.asp找到CSS3的简单示例，以了解上述网站（keithclark）中的代码。

如果您愿意使用JS，这应该会派上用场： - http://www.jqueryscript.net/tags.php?/parallax/

Answer 2

这是一个仅使用CSS的简单示例。它使用background-attachment: fixed;。请注意，background-attachment不是supported in Opera Mini or the Android browser。

＆＃13;

html,
body {
    min-height:100%;
    min-width:100%;
    height: 100%;
    padding:0;
    margin:0;
    text-align:center;
    font-family: Arial;
}

.background {
    width: 100%;
    min-height: 100%;
    background-size: contain;
    background-position: center center;
    background-attachment: fixed;
}

.background > div {
    background-color: #000000;
    color: #ffffff;
    padding: 30px 0;
}

.background1 {
    background-image: url(http://placehold.it/800x450&text=Background1);
}

.background2 {
    background-image: url(http://placehold.it/800x450&text=Background2);
}
.background3 {
    background-image: url(http://placehold.it/800x450&text=Background3);
}

＆＃13;

<div class="background background1">
    <div>Some content</div>
</div>
<div class="background background2">
    <div>A Second Page</div>
</div>
<div class="background background3">
    <div>A Third Page</div>
</div>

＆＃13;

这是jsFiddle;

中的工作演示

我可以使用CSS来创建这种滚动行为，还是应该使用jQuery？

2 个答案: