jquery - HTML/CSS/Jquery 滚动问题

Question

作为我的 question 的跟进 昨天关于 HTML/CSS 列滚动。

这是可行的，但当我开始滚动时右栏比屏幕高度短时我遇到了一个问题，该栏移动到页面底部。

这个 FIDDLE 表明我的意思。

正在使用的 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'
        });
    }
});

我要归档的是，如果右栏没有屏幕那么长，那么它应该留在顶部。

如果它比屏幕长那么它应该滚动，但是当它到达底部时停止。

如果需要，左栏需要能够继续滚动。

希望这是有道理的!谢谢

****更新****如果右列比屏幕长，则将右列设置为 FIXED 会停止滚动到列表底部。

Answer 1

你的问题已经解决了。只需在您的 CSS 中添加 position:fixed

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