1. 首頁
  2. 問答
  3. CSS/jQuery：位於底部的位置元素，但在頁腳進入視口時向上滾動

CSS/jQuery：位於底部的位置元素，但在頁腳進入視口時向上滾動

2010-09-12 39 views
2

這可能是一個半重複的問題，但我沒有找到任何能完全解決我想要做的事情。CSS/jQuery：位於底部的位置元素，但在頁腳進入視口時向上滾動

我有一個固定位置的div，固定在屏幕的底部。它的z-index將其放在主要內容上。正如預期的那樣，當我滾動時，它會粘在屏幕的底部，並且其背景圖像與主要內容部分重疊。

以下是棘手的地方：當頁腳進入視口時，我希望頁腳推動它。

我正在使用jQuery插件查看頁腳何時進入視口，然後將位置從固定位置改爲相對位置。問題是，當它這樣做時，它跳到主內容div下面。

這裏的插件：視口選擇器的jQuery（抱歉不能發佈兩個環節尚）

這裏是我的jQuery

$(function() { 
    $(window).bind('scroll', function(event) { 
     $('footer:in-viewport').each(function() { 
      $('#extra1').css('position','relative') 
     }); 
     $('#extra2:below-the-fold').each(function() { 

     }); 
    }); 
});

這裏是我的例子，這是不完全的功能，反而給人一種我想要做什麼的好主意：http://illtron.net/test/position/

此外，我想弄清楚如何讓事情回到原來的狀態，當您向後滾動時，腳註再次低於折線，但我對插件有點困惑。

關於如何解決這個問題的任何想法都會很棒。如果我看起來像是以一種非常愚蠢的方式來做這件事，我很樂意採取一種完全不同的方向。

來源

2010-09-12 freshyill

回答

0

我想出了這一個。這是那些試驗和錯誤情況之一，最終我很幸運。我有一種感覺，我會用CSS解決它。如果有人能幫我清理jQuery，我會很感激。我有一種感覺，它可能會比現在更優化一些。

我的HTML結構看起來大致是這樣的：

<div id="extra1"> 
    <div id="extra2"></div> 
    <div id="main">Some actual content</div> 
</div> 
<footer>footer<footer>

我的CSS：

#extra1 {position: relative;} 
#extra2 {background: url(../wavesiguess.png) bottom center no-repeat;} 

.overlay {position: fixed; z-index: 10; height: 285px; width: 100%; bottom: 0;} 
.scrolling {position: absolute; height: 285px; width: 100%; bottom: 0;}

我的jQuery：

$(function() { 
    $(window).bind('scroll', function(event) { 
     $('footer:in-viewport').each(function() { 
      $('#extra2').removeClass('overlay'); 
      $('#extra2').addClass('scrolling'); 
      $('footer').addClass('above'); 
     }); 
    }); 

    $(window).bind('scroll', function(event) { 
     $('footer.above:below-the-fold').each(function() { 
      $('#extra2').addClass('overlay'); 
      $('#extra2').removeClass('scrolling'); 
      $('footer').removeClass('above'); 
     }); 
    }); 
});

注：我的示例頁面仍然存在，但它是雖然它在「真實」頁面上完美地工作，但由於某種原因並不完全工作。在這個例子中，當魔術發生的時候會有一些跳躍，可能只是從一些我無法輕易追蹤的邊緣開始。

來源

2010-09-13 03:36:54 freshyill

相關問題

 相關問題