0

有问题的 Div 是此链接右侧边栏上的灰色框。

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

我知道这里有一个非常相似的问题和某种答案，但没有经过检查，我无法让它工作。

我充其量是 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);

    });
  }  
});
4

1 回答 1

0

更新的答案

由于我们正在修改原始代码中的偏移量，因此脚本丢失了原始偏移量的跟踪，因此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 事件，在您的网站上玩了一会儿，看起来下面的代码应该可以工作。它的作用是当窗口滚动到足以修复评论 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在控制台中访问，它会返回window对象的一部分。

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

于 2013-05-24T03:46:39.363 回答