Question

很抱歉，如果这是一个简单的问题，但我发现很难在这个问题上谷歌。我正在向我的网站实施自制聊天系统。在任何页面的右下角都会有一个由可滚动div组成的聊天窗口（以gtalk方式）。如果要显示的消息太多，则此div将变为可滚动。到目前为止一切都很好。

我想要的是，当用户滚动此div并到达它的底部时，滚动停止：但是实际上一旦滚动了聊天div，整个页面就会开始滚动。如果用户想要滚动页面，我希望他必须将鼠标移出聊天div，然后滚动。

我可以在简单的CSS中实现这一点，还是需要一些JS？

提前致谢。

Answer 1

http://jsfiddle.net/Tgm6Y/1447/

我想你需要这样的东西..对吗？如果你需要这样的东西..除了css你也需要一些js ..

$.fn.followTo = function ( elem ) {
    var $this = this,
        $window = $(windw),
        $bumper = $(elem),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() > (bumperPos - thisHeight)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#one').followTo('#two');

一旦div滚动到底部，阻止整个页面滚动

1 个答案: