使用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>