jquery - 如何在溢出的父div内滚动固定div

Question

我已经为此苦苦挣扎了一段时间了。我需要有一个 div，当它的父级水平滚动时，它应该是 position:fixed; ，但当垂直移动时，它应该与其余内容一起滚动。最重要的是它需要看起来光滑。

请参阅此jsfiddle 。这里的问题是固定div向上滚动时到达父顶部边框时不会消失。

我问了类似的question已经，但不幸的是没有得到有用的答复。那里的 jsfiddle 更好地反射(reflect)了我正在努力的方向。

我见过很多接近我所要求的问题，但这些问题通常都是以“粘性”的方式解决的。许多答案都源于此 article ，但我想我要求的是不同的东西。

请帮忙，我真的很困难:-)

ps:有一些示例，固定 div 滚动出浏览器窗口，但不滚动出父 div。

编辑:我确实找到了单独移动滚动条的情况的解决方案。但是，如果对 Angular 拖动，解决方案将不起作用。

Answer 1

我想我有你需要的东西。我设法定位绿色子元素 (#container2)，使其在水平滚动时保持固定，然后在内部内容垂直滚动时保留其水平偏移。

jQuery 是:

var $container = $("#container");
var $content1 = $("#content1");
var $content2 = $("#content2");

var content2InitTop = $content2.offset().top;
var content2InitLeft = $content2.offset().left;


$container.on('scroll', function () {
    var scrollTop = $(this).scrollTop();
    var scrollLeft = $(this).scrollLeft();

    if (scrollLeft == 0 && scrollTop == 0) {
        $content2.removeClass('fixed');
        $content2.offset({
            'top': content2InitTop,
            'left': content2InitLeft
        });
    }

    if (scrollLeft > 0) {
        $content2.addClass('fixed');
        $content2.offset({
            'top': content2InitTop - scrollTop
        });
    } 

    if (scrollTop > 0) {
        $content2.removeClass('fixed');
        $content2.offset({
            'top': content2InitTop - scrollTop,
            'left': content2InitLeft
        });
    } else {
        $content2.offset({
            'left': content2InitLeft
        });
    }
});

CSS 是:

div, body {
    margin : 0px;
    padding : 0px;
    border : 0px;
}
#container {
    width: 400px;
    height: 200px;
    margin: 45px;
    overflow: auto;
    border: 5px solid pink;
}
#inner {
    width: 800px;
    height: 500px;
    position: relative;
}
#content1 {
    width: 300px;
    height: 50px;
    background-color: red;
}
#content2 {
    width: 150px;
    height: 50px;
    background-color: green;
    margin-top: 10px;
    position: absolute;
}
#content2.fixed {
    position: fixed;
    background-color: lightgreen;
}

演示 fiddle 是:http://jsfiddle.net/audetwebdesign/7Aw6M/