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 设置为两列来删除 window 滚动条。但是那样你需要为这些列设置一定的高度。结果可能不是你需要的，这里还有一个演示：

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

HTML / CSS 列滚动

HTML / CSS Column Scrolling

html

css

scroll

multiple-columns