视差滚动scrollTop

我需要一点帮助视差滚动。我正在尝试将图像粘贴到顶部div的底部。这里是jQuery视差滚动scrollTop

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

请参阅如何被粘到窗口的顶部？我希望它能够坚持标题的底部。

来源

2013-07-07 Juan Rangel

你打电话给'parallax（）'怎么样？是它，'$（window）.on（'scroll'，parallax）;'？（）; – Ohgodwhy

我打电话就像这样''jQuery（window）.bind（'scroll'，function（e）{ \t parallax（）; \t}）; ' –

您可能正在使用absolute进行定位。将其更改为fixed和top应始终为0px。这应该排序你的问题。这是JSFiddle displaying it。没有JavaScript是必需的，使其工作。

来源

2013-07-07 01:23:10

谢谢你的评论。该位置是固定的，但它固定在浏览器窗口而不是div的顶部。 –

也是固定的div吗？显示一些html，我相信我们可以对它进行排序。把它放入JSFiddle。 –

谢谢你的小提琴，但这不是我想要完成的。我试图使用视差滚动，而不是只修复顶部栏。 –

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

我是通过忘记绝对或固定位置以及z-索引来做到这一点的。相反，我创建了一个包装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

HTML删除#grid格：

<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与该滚动功能。

这里它is in a JSFiddle。

来源

2013-07-07 02:47:19

视差滚动scrollTop

回答

相关问题