jQuery - 当它碰到另一个 div 时停止固定浮动 div [重复]

Question

有问题的 Div 是右侧边栏上的灰色框 this link。

很好地滚动，但它永远不会停止。它应该在到达“公告”div 之前停止。

我知道有一个非常相似的问题和类似的答案here，但它没有被检查，我无法让它工作。

我充其量是 jQuery 的新手，所以我非常感谢 2 岁的风格答案。

触发div滚动的代码是：

$(function () {

  var msie6 = $.browser == 'msie' && $.browser.version < 7;

  if (!msie6) {
    var top = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
      // what the y position of the scroll is
      var y = $(this).scrollTop();

      // whether that's below the form
      if (y >= top) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
      } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
      }
        var newWidth = $('#comment').parent().width();
        $('#comment').width(newWidth);

    });
  }  
});

Answer 1

更新答案

由于我们修改了原始代码中的偏移量，脚本丢失了原始偏移量，因此 y 将始终等于 ctop，因此始终满足 (y>=ctop) 并且永远不会触发 else 块）。这可以通过在函数外部将ctop 定义为全局变量来解决，这样当我们在滚动时操作#comment 的偏移量时，它的原始偏移量值就不会丢失。我还在嵌套的 if 中添加了一个 else 块，以便在滚动到底部然后向上滚动后将偏移量重置为零（否则顶部关闭的 #comment 有时会被切断）。以下代码应该可以工作。再一次，让我知道它是怎么回事，如果你有任何问题:)

$(document).ready(function() {
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    var abottom = $('#announcements').offset().top - parseFloat($('#announcements').css('margin-top').replace(/auto/, 0));

    // whether that's below the form
    if (y >= ctop) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
        if (y > abottom-$('#comment').height()){
            $('#comment').offset({'top': abottom-$('#comment').height()-y});
        }
        else
        {
            $('#comment').offset({'top': 0 });
        }
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
    var newWidth = $('#comment').parent().width();
    $('#comment').width(newWidth);

    });

---

原答案

因此，我使用 Chrome 的 javascript 控制台将绑定更改为 $(window).scroll 事件，在您的网站上玩了一会儿，看起来下面的代码应该可以工作。它的作用是当窗口滚动到足以修复 cmets div 时，它还会检查滚动的 y 位置是否在公告 div 应该位于底部的位置。如果是，则将cmets div的位置垂直偏移公告div位置+屏幕大小与当前滚动位置的差值（这将返回一个负值，导致cmets div向上）。这是我复制并粘贴到 Chrome javascript 控制台 (ctrl+shift+j) 中的代码，并且似乎可以正常工作：

$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    var ctop= $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
    var abottom = $('#announcements').offset().top - parseFloat($('#announcements').css('margin-top').replace(/auto/, 0));

    // whether that's below the form
    if (y >= ctop) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
        if (y > abottom-$('#comment').height()){
            $('#comment').offset({'top': abottom-$('#comment').height()-y});
        }
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
    var newWidth = $('#comment').parent().width();
    $('#comment').width(newWidth);

    });

一些注意事项：
cmets div 的对齐方式很奇怪（至少对我而言），因为 div 太大而无法在不滚动的情况下放入页面。这更像是一个设计问题而不是编码问题。

我把top改成ctop是因为top是window的一个属性，所以你尝试在控制台访问top，它会返回window对象的一部分。

让我知道这是否适合你:)