Question

我需要一些视差滚动的帮助。我试图让图像粘在顶部div的底部。这是jQuery

function parallax() {
var scrollPosition = jQuery(window).scrollTop();
jQuery('#grid').css('top', (0 - (scrollPosition * .5))+'px' );
}

现在滚动时它会粘在浏览器窗口的顶部。我使用了更高的数字，例如jQuery('#grid').css('top', (134 - (scrollPosition * .5))+'px' );

当页面加载时，这给了我适当的间距，但是当我滚动时，可以在div的顶部看到白色。我不熟悉jQuery，所以任何帮助都会受到赞赏。

基本上我如何将div的顶部位置指定给变量scrollPosition。

/ *更新* / 对不起，这里有一些关于这个问题的更多细节。

这是jsfiddle

看看如何贴在窗户顶部？我希望它能坚持到标题的底部。

Answer 1

您可能正在使用absolute定位。将其更改为fixed，top应始终为0px。这应该解决你的问题。这是一个JSFiddle displaying it。无需JavaScript即可使其正常运行。

Answer 2

我正在写一个新答案，因为我以前不太了解你。你需要背景从标题的底部开始，对吗？

我通过忘记绝对或固定定位以及z-index来做到这一点。相反，我创建了一个包装器div，以包裹#header div之后的所有内容。剩下的很好，不需要javascript。包装器将使用重复的背景图像自动延伸到页面的末尾。

这是：

CSS：

#wrapper {
    padding:20px;
background: url('http://wpzombies.com/wp-content/uploads/2013/07/grid_bg.jpg') repeat top center;
}

从css和html

中删除#grid div

HTML：

<div class="header">
    <h1>A header</h1>
</div>
<div id="wrapper">
    <div class="optin">
        <div class="wrap">
            <div id="home-para">
                <h2 class="home">Build, publish &amp; A/B test landing pages without I.T.</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, sapiente, magni qui ab vero repudiandae beatae a illum sed? Eaque, esse placeat incidunt laudantium sapiente debitis commodi rerum minus? Saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, sapiente, magni qui ab vero repudiandae beatae a illum sed? Eaque, esse placeat incidunt laudantium sapiente debitis commodi rerum minus? Saepe.</p>
                <div id="opt-box">
                    <input type="email" /><a href="#" class="button orange">You can start here!</a>
                </div>
            </div>
        </div>
    </div>

    <div class="space">Lorem ipsum dolor sit amet...</div>
</div>

删除与滚动功能相关的所有j。

这里is in a JSFiddle。

Parallax Scrolling scrollTop

2 个答案: