2

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

请看这个jsfiddle。这里的问题是，当向上滚动时，固定的 div 在到达父上边框时不会消失。

我已经问过一个类似的问题，但不幸的是没有得到有用的答复。那里的 jsfiddle 更好地反映了我正在努力的方向。

我已经看到了很多接近我所要求的问题，但这些问题通常以“粘性”的方式解决。这篇文章有很多答案，但我想我要求的是不同的东西。

请帮忙，我真的被卡住了:-)

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

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

4

3 回答 3

2

我想我有你需要的。我设法定位绿色子元素 ( #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/

于 2013-06-14T12:03:53.047 回答
0

这是工作演示 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');
        }           

    });
于 2013-06-14T10:57:44.670 回答
0

你所问的只能通过以下方式实现：

position:absolute

您不能让父级隐藏固定元素的溢出。

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

于 2013-06-14T10:49:49.183 回答