Question

我一直在努力解决这个问题。当它的父级水平滚动时，我需要一个div应该是position: fixed;，但是当它垂直移动时它应该与其余的内容一起滚动。最重要的是它需要看起来光滑。

请参阅此jsfiddle。这里的问题是当向上滚动时固定的div在到达父顶部边界时不会离开视图。

我已经问了类似的question，但遗憾的是没有得到有用的回复。那里的jsfiddle更好地反映了我正在努力的方向。

我看到很多问题接近我所要求的问题，但这些问题通常以“粘性”方式解决。很多答案来自于这个article，但我想我要求的是不同的东西。

请帮助，我真的被卡住了： - ）

ps：有一些例子，其中固定的div滚出浏览器窗口，但不是父div。

编辑：我确实找到了单独移动滚动条的解决方案。但是，如果您沿对角线方向拖动，则解决方案不起作用。

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;
}

和演示小提琴是：http://jsfiddle.net/audetwebdesign/7Aw6M/

Answer 2

您提出的问题仅适用于：

position:absolute

你不能让父母为固定元素隐藏溢出。

http://jsfiddle.net/sczpY/7/

Answer 3

以下是工作 DEMO http://jsfiddle.net/MPsFC/1/

一切正常。我添加了一些代码

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

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

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


        if (scrollTop <= lastScrollTop) {

            $content2.addClass('fixed');
            $content2.offset({'top' : content2InitTop - scrollTop});
        }
        else {

            $content2.removeClass('fixed');
        }           

    });

如何在溢出的父div中滚动固定的div

3 个答案: