Question

我正在尝试从右栏制作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：{{1} }

代码：

if (window_top < dist) {

滚动上的粘性div

1 个答案: