即使用户向下滚动,也很容易保持我的布局中的列固定,因此它始终可见.
当页面向下滚动足够远以使其离开视口时,也可以很容易地将列向下移动到页面,因此它在滚动开始之前就已锚定.
我的问题是,我的左手栏比普通窗口高,所以你需要能够向下滚动才能看到左栏中的所有内容(控件),但同时当你向上滚动时你想要看到再次控制的顶部.
这是我想要实现的目标：
所以左列总是占据窗口高度的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%;
}
它也会优雅地降级……
