3

看到这个：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>
4

1 回答 1

1

检查这个：
演示 在这里

我添加了一个新变量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();
于 2013-08-30T12:35:32.023 回答