1

我需要一些关于视差滚动的帮助。我正在尝试将图像粘贴到顶部 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。

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

这是一个jsfiddle

看看是怎么粘到窗口顶部的？我想让它贴在标题的底部。

4

2 回答 2

0

您可能正在使用absolute定位。将其更改为fixed并且top应该始终为0px. 那应该解决你的问题。这是一个显示它的 JSFiddle。无需 javascript 即可使其工作。

于 2013-07-07T01:23:10.553 回答
0

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

我通过忘记绝对或固定定位以及 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>

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

这是在 JSFiddle 中。

于 2013-07-07T02:47:19.873 回答