Javascript 在向下和向上滚动的div中浮动一个div（而不是在整个屏幕上）

我已经做了一个div-witin-div，我希望内部div在外部div内上下滚动页面时上下浮动。我设法使它限制不离开外部div表单，但当它到达底部时，它会下降到页面底部。请帮帮我，这是我的密码 css

CSS

#comment {
  position: absolute;
  /* just used to show how to include the margin in the effect */
}

HTML

<!--the outer div in which i have whole content -->
<div class="content">
    <!--the floating div, remains well inside form top but moves down outside div from bottom -->
    <div class="ftwrapper" id="comment">            
    </div><!--fb/twitter ends-->
</div>

JQuery

    $(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');
                }
            });
        }  
    });

$（函数（）{
变量msie6=$.browser='msie'&&$.browser.version<7；
如果（！msie6）{
var top=$（'#comment'）.offset（）.top-parseFloat（$（'#comment'）.css（'margin-top'）.replace（/auto/，0））；
$（窗口）。滚动（功能（事件）{
//卷轴的y位置是什么
var y=$（this.scrollTop（）；
//是否在表格下方
如果（y>=顶部）{
//如果是的话，请选择固定类别
$（'#comment'）.addClass（'fixed'）；
}否则{
//否则，请将其移除
$（'#comment'）.removeClass（'fixed'）；
}
});
}  
});

我根据您的要求做了一个样本测试。 如果滚动得太快，它就不能正常工作，但如果滚动得太快，就可以了。稍后我会对它做一些修改

var prevScroll = 0;
$(window).unbind("scroll");
function reposition() {
    var contPos  = $("#container").offset();
    var comment = $('#comment');    
    contPos.bottom = contPos.top + $("#container").outerHeight();
    console.log('contPos',contPos);
    $(window).scroll(function (event) {
        // what the y position of the scroll is
        var     scroll = $(window).scrollTop()
            ,   y = scroll
            ,   pos = comment.offset()
        ;
        pos.bottom = comment.outerHeight();
        if ( scroll > prevScroll) {
            //down
        } else {
            //up
        }
        prevScroll = scroll;
        // whether that's below the form
        console.log(pos.bottom + scroll ,":", contPos.bottom);
        if (contPos.top > scroll) {
            // if so, ad the fixed class
            comment.css({
                position: 'relative',
                bottom  : '0px',
                left    : '0px'
            });
            console.log("Too High");
        } else if ( pos.bottom + scroll > contPos.bottom) {
            //comment.removeClass('fixed');
            comment.css({
                position: 'absolute',
                top      : (contPos.bottom - comment.outerHeight() )+'px',
                left     : pos.left+'px'
            });

            console.log("Too Low");
        } else {
            // middle area
            console.log("Perfect");
            comment.css({
                position: 'fixed',
                top   : '0px',
                left  : pos.left + 'px'
            });
        }
    });
}
$(document).ready(reposition);

---

听起来你想要这样的东西？请访问www.webabinc.com/test，你会看到右侧有一个向下浮动的div，但问题是我想将其限制在外部div，即内容div中，但当我在底部添加页脚时，页脚也会出现，你基本上需要将其保留在容器中，而不是浏览页脚，等等？看起来facebooks侧边栏具有您要查找的行为。也许你可以搜索他们的源代码，看看它是如何工作的。我只是需要在容器中，任何解决方案，请，需要做得很快