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的偏移时，它的原始偏移值不会丢失。我还在嵌套中添加了一个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事件的绑定，并且看起来以下代码应该有效。它的作用是当窗口滚动到足以修复注释div时，它还会检查滚动的y位置是否位于通知div应位于底部的位置。如果是，则它通过公告div位置+屏幕大小与当前滚动位置（将返回负值，导致注释div向上）之间的差异垂直地偏移注释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);

    });

一些注意事项：
注释div的对齐很奇怪（至少对我而言）因为div太大而不能滚动页面。这是一个设计问题，而不是编码问题。

我将top更改为ctop，因为top是window的属性，因此您尝试在控制台中访问top，它会返回窗口对象的一部分。

请告诉我这是否适合您：）

jQuery - 当它遇到另一个div时停止修复浮动div

1 个答案:

更新答案

原始答案