滚动上的粘性 div

Question

看到这个：http://jsfiddle.net/3yx5C/1/

我正在尝试从右列创建一个 DIV（绿色 DIV）： 1.遇到HEADER时固定； 2. 滚动到顶部并且遇到上面的其他DIV（*灰色DIV）时不固定；

我无法实现的是第二部分。有什么想法吗？

不得不提的是，右边的灰色DIV可能不止两个，高度灵活，而且不能被包裹。

    <div id="HEADER"></div>
    <div id="WRAPPER">
        <div class="layout_right">
            <div style="height: 80px; background: gray;"></div>
            <div style="height: 80px; background: gray;"></div>
            <div id="right_ads">I am sticky!</div>
        </div>
        <div class="layout_middle">
            <div style="width: 300px; height: 200px; background: beige;"></div>
            <div style="width: 300px; height: 200px; background: pink;"></div>
            <div style="width: 300px; height: 200px; background: blue;"></div>
        </div>
    </div>

<script type='text/javascript'>
window.addEvent('domready', function() {
      function sticky_AD() {
          var headerHeight2 = $('HEADER').getSize().y;
          var window_top = $(window).getScroll().y + headerHeight2 + 20;
          var div_top = $('right_ads').getPosition().y;

          if (window_top > div_top){
              $('right_ads').addClass('fixed_AD').setStyles({'top': headerHeight2 + 20});
          } else {
              $('right_ads').removeClass('fixed_AD').setStyles({'top':'auto'});
          }
      }

      $(window).addEvent('scroll', function(){
          sticky_AD();
      });
      sticky_AD();

});
</script>

Answer 1

检查这个：
演示 here

我添加了一个新变量var dist = $('right_ads').getPosition().y; 来存储原始位置并在以后使用它并将您的else 更改为新的if：if (window_top < dist) {

代码：

function sticky_AD() {
    var headerHeight2 = $('HEADER').getSize().y;
    var window_top = $(window).getScroll().y + headerHeight2 + 20;
    var div_top = $('right_ads').getPosition().y;
    if (window_top > div_top) {
        $('right_ads').addClass('fixed_AD').setStyles({
            'top': headerHeight2 + 20
        });
    }
    if (window_top < dist) {
        $('right_ads').removeClass('fixed_AD').setStyles({
            'top': 'auto'
        });
    }
}
$(window).addEvent('scroll', function () {
    sticky_AD();
});
var dist = $('right_ads').getPosition().y;
sticky_AD();