Swap CSS класс на основе позиции прокрутки с Javascript

Question

Я ищу, чтобы воссоздать боковую панель корзины Apple Store.

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

Это похоже на «позицию: фиксированный», за исключением того, что начинается как «позицию: абсолютная» с «pinned_top» класса CSS, а затем переходит в класс CSS «плавающий», когда определенный scroll- 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>