保持左列可见且可滚动

Question

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

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

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

这是我想要实现的目标:

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

是否有一些jQuery魔法可以实现这一目标？

Answer 1

你的意思是这样的吗？（演示）

\n\n

var sidebar = document.getElementById(\'sidebar\');\nvar sidebarScroll = 0;\nvar lastScroll = 0;\nvar topMargin = sidebar.offsetTop;\n\nsidebar.style.bottom = \'auto\';\n\nfunction update() {\n    var delta = window.scrollY - lastScroll;\n    sidebarScroll += delta;\n    lastScroll = window.scrollY;\n\n    if(sidebarScroll < 0) {\n        sidebarScroll = 0;\n    } else if(sidebarScroll > sidebar.scrollHeight - window.innerHeight + topMargin * 2) {\n        sidebarScroll = sidebar.scrollHeight - window.innerHeight + topMargin * 2;\n    }\n\n    sidebar.style.marginTop = -sidebarScroll + \'px\';\n}\n\ndocument.addEventListener(\'scroll\', update);\nwindow.addEventListener(\'resize\', update);\n

\n\n

var sidebar = document.getElementById(\'sidebar\');\nvar sidebarScroll = 0;\nvar lastScroll = 0;\nvar topMargin = sidebar.offsetTop;\n\nsidebar.style.bottom = \'auto\';\n\nfunction update() {\n    var delta = window.scrollY - lastScroll;\n    sidebarScroll += delta;\n    lastScroll = window.scrollY;\n\n    if(sidebarScroll < 0) {\n        sidebarScroll = 0;\n    } else if(sidebarScroll > sidebar.scrollHeight - window.innerHeight + topMargin * 2) {\n        sidebarScroll = sidebar.scrollHeight - window.innerHeight + topMargin * 2;\n    }\n\n    sidebar.style.marginTop = -sidebarScroll + \'px\';\n}\n\ndocument.addEventListener(\'scroll\', update);\nwindow.addEventListener(\'resize\', update);\n

\n\n

它几乎也能优雅地降级\xe2\x80\xa6

\n