基於滾動位置淡入和淡出某些DIV

我遇到的基本問題是，我想根據用戶當前在頁面上的垂直位置淡入淡出特定的div。當向下滾動容易時，讓第一個div淡入淡出，當我回到頁面頂部時淡入淡出。我猜我需要使用大於，小於scrollTop JavaScript來建立每個的限制。基於滾動位置淡入和淡出某些DIV

這是我一直使用至今的JavaScript：

if(scrollTop > 500) { 
$("#Project-Desc, #Aqueous-Desc").fadeIn('slow');} 
if(scrollTop < 500) { 
$("#Project-Desc").fadeOut('slow');}

這裏是我的地盤，建立正是我想要做的事：

http://luke-keller.com/test2/

你會看到，淡入的小灰框將包含項目描述，這就是我需要淡入舊內容並根據滾動位置或類似內容淡入新內容的地方。

謝謝！

PS - 其他HTML

<div id="Portfolio"> 

    <div id="Port-Position"> 

     <div id="Aqueous" class="Projects"> 
      <div class="Project-Spacer"> 
      </div> 
      <img src="Images/Projects/AqueousModel.jpg" width="600" height="400" border="0" alt=""/> 
      <img src="Images/Projects/AqueousPlan.jpg" width="600" height="400" border="0" alt=""/> 
      <img src="Images/Projects/AqueousModel.jpg" width="600" height="400" border="0" alt=""/> 
      </div> 

      <div class="Project-Divider"> 
      </div> 

      <div id="Townhouse" class="Projects"> 
      <div class="Project-Spacer"> 
      </div> 
      <img src="Images/Projects/townhousePlan.jpg" width="600" height="400" border="0" alt=""/> 
      <img src="Images/Projects/townhouseModel.jpg" width="600" height="400" border="0" alt=""/> 
      <img src="Images/Projects/townhousePath.jpg" width="600" height="400" border="0" alt=""/> 
      </div> 

     </div> 
    </div> 

     <div id="Project-Desc"> 

      <div id="Aqueous-Desc" class="Desc"> 
       <h2>AQUEOUS</h2> 
       <p><h4>2006 - Temple University</h4></p> 

       <div class="Desc-Body"> 
       Aqueous, meaning of water, is a blah blah blah more text here blah blah blah sweet awesome. Minecraft. Love that stuff. 
       </div> 

       <div class="Desc-Footer"> 
       Clay Prototype, Handrawn Plan on Vellum, Foamcore Model. 
       </div> 

      </div> 

      <div id="Townhouse-Desc" class="Desc"> 
       <h2>TOWNHOUSE</h2> 
       <p><h4>2006 - Temple University</h4></p> 

       <div class="Desc-Body"> 
       Aqueous, meaning of water, is a blah blah blah more text here blah blah blah sweet awesome. Minecraft. Love that stuff. 
       </div> 

       <div class="Desc-Footer"> 
       Clay Prototype, Handrawn Plan on Vellum, Foamcore Model. 
       </div> 

      </div> 

</div>

注：項目介紹，我越來越淡入和開箱即用，是一個固定位置元素，如果有什麼差別。

來源

2011-08-29 Luke Keller

如果您的意思是側面的菜單（懸停時淡藍色），則始終存在。否則，在滾動時沒有任何東西會消失。 – Bojangles

奇怪的是，當我滾動它顯示一個框，我將在屏幕截圖中包含：http://imageshack.us/photo/my-images/269/sitessi.jpg/ –

啊我看到了。那麼，您需要獲取元素的[.offset（）.top]（http://api.jquery.com/offset/），看看它是否在頁面上，如果是顯示彈出框。如果你能給我一些基本的HTML內容部分和彈出窗口，我可以解決一些問題。 – Bojangles

我想我有答案。我歡迎任何和所有對此代碼有任何建議的人，但基本上你需要找到窗口的滾動位置，並根據某些參數插入淡入和淡出（位置大於x但小於y，淡入#mydiv）。我在下面編了一些代碼，還有很多東西要去。

$(window).scroll(function(){ 
    // gets the position of the window 
      var y = $(window).scrollTop(); 

      if(y < (600)){ 
      $(".Desc").fadeOut('slow');} 

      if(y > (600) && y < (1900)){ 
      $("#Aqueous-Desc").fadeIn('slow');} 
      if(y > (1900)){ 
      $("#Aqueous-Desc").fadeOut('slow');} 
      if(y < (600)){ 
      $("#Aqueous-Desc").fadeOut('slow');} 


      if(y > (2100) && y < (3300)){ 
       $("#Townhouse-Desc").fadeIn('slow');} 
      if(y > (3300)){ 
       $("#Townhouse-Desc").fadeOut('slow');} 
      if(y < (2100)){ 
       $("#Townhouse-Desc").fadeOut('slow');} 


      if(y > (3500) && y < (4700)){ 
       $("#Poley-Desc").fadeIn('slow');} 
      if(y > (4700)){ 
       $("#Poley-Desc").fadeOut('slow');} 
      if(y < (3500)){ 
       $("#Poley-Desc").fadeOut('slow');}

來源

2011-08-29 16:47:30

這是非常有幫助的。我做了一些修改，我發現在用戶快速滾動時緩解元素間轉換的幫助。

喜歡的東西

 if(y > (600) && y < (1900)){ 
     $("#Aqueous-Desc").fadeIn('slow'); 
    }else{ 
     $("Aqueous-Desc").fadeOut("slow"); 
    }

此結合不透明內容if語句設定，所以如果你曾經出界將淡出範圍。

來源

2013-05-06 17:18:37

基於滾動位置淡入和淡出某些DIV

回答

相關問題