視差滾動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

回答

相關問題