javascript - 使用 Javascript 在 Scroll Position 的基础上交换 CSS 类

Question

我正在寻找重新创建 Apple Store 购物车边栏的方法。

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

它与“position: fixed”类似，不同之处在于它以“position: absolute”开始，带有 CSS 类“pinned_top”，然后在到达某个 scroll-y 位置时切换到 CSS 类“floating”。

我到处都找过这个，教程似乎应该很明显，但我还没有找到任何东西。有帮助吗？

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}); 
    } 
  }); 
});