使用Javascript以滾動位置爲基礎交換CSS類

Question

我正在尋找重新創建Apple Store購物車的側邊欄。

http://store.apple.com/us/configure/MB535LL/A?mco=MTA4MTg3NTQ

它類似於「位置是：固定」除了它開始作爲「位置：絕對」與CSS類「pinned_top」，然後切換到CSS類「浮動」在某個滾動功能的y位置已到達。

我已經看到了無處不在，這似乎是一個教程應該是顯而易見的，但我還沒有找到任何東西。任何幫助？

Answer 1

您將必須處理window.onscroll事件，並檢查元素位置，如果scrollTop大於元素的位置，則將該元素設置爲頂部，如果不是，則將元素放置在原來的位置。

的example使用jQuery：

$(function() { 
    var $el = $('.fixedElement'), 
     originalTop = $el.offset().top; // store original top position 

    $(window).scroll(function(e){ 
    if ($(this).scrollTop() > originalTop){ 
     $el.css({'position': 'fixed', 'top': '0px'}); 
    } else { 
     $el.css({'position': 'absolute', 'top': originalTop}); 
    } 
    }); 
}); 

Answer 2

該工作在FF3.5！

<div id="banner" style="border:1px solid blue;width:100%;height:100px;"> 
This is a banner1 
</div> 
<div style="clear:left;border:1px solid green;width:70%;height:900px;top:110;"> 
    this is main div 
</div> 
<div id="fixedDiv" 
      style="clear:left;position:absolute;top:110;right:20;width:25%; 
      border:1px solid red;height:500px;"> 
    lorem ipsum dorem dorel ipsa zeta zelga rumba lorem ipsum dorem dorel ipsa 
    zeta zelga rumba lorem ipsum dorem dorel ipsa zeta zelga rumba 
</div> 

<script type="text/javascript"> 
    var abs=false; //dont set it again and again 
$(document).ready(function(){ 
    $().scroll(function(e){ 
    var st=$(window).scrollTop(); 
    //110 is top of fixedDiv 
    if(st>110) 
    { 
       //set number to how much you want it from top! 
       $("#fixedDiv").css({"top":10}); 
       if(abs) return; 
       $("#fixedDiv").css({"position":"fixed"}); 
       abs=true; 
      } 
      else 
      { 
       if(!abs) return; 
       //if we are again showing banner, change position to absolute 
       $("#fixedDiv").css({"position":"absolute","top":110}); 
       abs=false; 
      } 
     }); 
    }); 
</script>