javascript – 保持左列可见且可滚动

即使用户向下滚动,也很容易保持我的布局中的列固定,因此它始终可见.

当页面向下滚动足够远以使其离开视口时,也可以很容易地将列向下移动到页面,因此它在滚动开始之前就已锚定.

我的问题是,我的左手栏比普通窗口高,所以你需要能够向下滚动才能看到左栏中的所有内容(控件),但同时当你向上滚动时你想要看到再次控制的顶部.

这是我想要实现的目标：

所以左列总是占据窗口高度的100％,但是当用户向下滚动时,他们可以看到div的底部,当他们开始向上滚动时,向上滚动直到它再次到达窗口的顶部.所以无论他们滚动页面多远,div的顶部总是在附近.

有没有一些jQuery魔法来实现这一目标？

解决方法

你的意思是这样的吗？ (Demo)

var sidebar = document.getElementById('sidebar');
var sidebarScroll = 0;
var lastScroll = 0;
var topMargin = sidebar.offsetTop;

sidebar.style.bottom = 'auto';

function update() {
    var delta = window.scrollY - lastScroll;
    sidebarScroll += delta;
    lastScroll = window.scrollY;

    if(sidebarScroll < 0) {
        sidebarScroll = 0;
    } else if(sidebarScroll > sidebar.scrollHeight - window.innerHeight + topMargin * 2) {
        sidebarScroll = sidebar.scrollHeight - window.innerHeight + topMargin * 2;
    }

    sidebar.style.marginTop = -sidebarScroll + 'px';
}

document.addEventListener('scroll',update);
window.addEventListener('resize',update);

#sidebar {
    background-color: #003;
    bottom: 1em;
    color: white;
    left: 1%;
    overflow: auto;
    padding: 1em;
    position: fixed;
    right: 80%;
    top: 1em;
}

body {
    line-height: 1.6;
    margin: 1em;
    margin-left: 21%;
}

它也会优雅地降级……