HTML / CSS 列滚动

Question

我的页面上有两列。

左列是一长串，右列较小。

当我上下滚动时，我希望右栏浮动，页面不是静态的。

我已经设法使用这个 css 来完成这项工作：

    .connected {
        min-height:100px;
        float: left;
        width: 200px;
    }
    .connected.right {
        position: fixed; 
        min-height:100px;
        height: auto;
        float: right;
    }

可以在这里看到FIDDLE。

我遇到的问题是，如果右栏很长，那么它根本不会移动，并且底部的条目也无法访问。

有什么方法可以让正确的列滚动，但直到你到达它的末尾，然后它是固定的，直到你开始向上滚动？

谢谢

Answer 1

将overflow: auto; 设置到右列怎么样？

.connected.right {
    position: fixed;
    overflow: auto;
    min-height:100px;
    height: 200px;
    float: right;
}

这将为它设置一个滚动，并允许滚动到列的最后。

演示：https://jsfiddle.net/8fxosb5f/2/

或者您可以通过将overflow: auto 设置为两列来移除窗口滚动。但是这样你需要为这些列设置一定的高度。结果可能不是你所需要的，这里仍然是一个演示：

https://jsfiddle.net/8fxosb5f/3/

这是一个非常粗略的代码，但我认为您将设法设置它以满足您的需求：（它需要 jQuery）

var columnHeight = $('.right').outerHeight(true);

var windowHeight = $(window).height();
$(window).scroll(function () {

    if ($(this).scrollTop() + windowHeight >= columnHeight) {
        $('.right').css({
            position: 'fixed',
            top: -(columnHeight - windowHeight)
        });
    } else {
        $('.right').css({
            position: 'static',
            top: 'auto'
        });
    }
});

演示：https://jsfiddle.net/8fxosb5f/5/

Answer 2

你写的css不正确

.connected.right {
        position: fixed; 
        min-height:100px;
        height: auto;
        float: right;
    }

改成

.connected .right {
        position: fixed; 
        min-height:100px;
        height: auto;
        float: right;
    }

工作示例here