jQuery移動頁面滾動的div

我想移動基於頁面滾動的div，我已經閱讀this的問題，但它是基於純JavaScript的。jQuery移動頁面滾動的div

這是我做的fiddle，這裏是我的want。

下面的代碼：

HTML：

<div class="outer-container"> 
    <div class="inner-container"> 
     <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/homeslide1a.png'); height: 100%; background-size: cover;" class="slider-background-image' "> 
      <div class="slide-inner-container"> 
       <div class="slider-content"> 
        <h4>The Course</h4> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 
        </p> 
       </div> 
       <!-- /.slider-content --> 
       <div class="clearfix"></div> 
      </div> 
      <!-- /.slide-inner-container --> 
     </div> 
     <!-- /.slide --> 
     <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/02/2-Home-membership.jpg'); height: 100%; background-size: cover;" class="slider-background-image' "> 
      <div class="slide-inner-container"> 
       <!-- More content here soon --> 
      </div> 
      <!-- /.slide-inner-container --> 
     </div> 
     <!-- /.slide --> 
     <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/02/2-Home-special-events.jpg'); height: 100%; background-size: cover;" class="slider-background-image' "> 
      <div class="slide-inner-container"> 
       <!-- More content here soon --> 
      </div> 
      <!-- /.slide-inner-container --> 
     </div> 
     <!-- /.slide --> 
     <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/CORKHome-_position4.jpg'); height: 100%; background-size: cover;" class="slider-background-image' "> 
      <div class="slide-inner-container"> 
       <!-- More content here soon --> 
      </div> 
      <!-- /.slide-inner-container --> 
     </div> 
     <!-- /.slide --> 


    </div> 
    <!-- /.inner-container --> 
</div> 
<!-- /.outer-container -->

我想'.slider-content'類股利對頁面滾動移動就像reference link

任何幫助，將不勝感激。

來源

2015-06-15 chandan

您是否試圖自己編寫腳本？ – Todd

我做過了，我會用我的嘗試更新這個問題，但我不熟悉pageYOffset – chandan

你有分號';'在你的每個css屬性之後jquery。事實上，你不需要他們。 http://jsfiddle.net/yak613/657mm7Lz/ – TricksfortheWeb

也許你可以使用skrollr.js

檢查此website 的演示它類似於你想要

來源

2015-06-15 17:01:26

感謝您的建議，但它可能使事情變得複雜，處理其他框架。自定義代碼將是最有效的方式，但感謝您的答案。 – chandan

什麼，我認爲使用「的位置是：固定;」是最簡單的方法。我改變了它，它適用於我。

第23行：

.slider-content{ 
    position: fixed; 
    //... 
}

然後就可以設置的位置（左，上，...），使它看起來像你共享的例子。

來源

2015-06-15 17:10:30

謝謝，但我想div後消失它是不可能與位置的父div：固定 – chandan

甚至沒有這個？ http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning –

使用z-index與固定位置似乎是一個替代方案，讓我試試，如果它的工作，它會一個更簡單的解決方案。 – chandan

jQuery移動頁面滾動的div

回答

相關問題