保持左列可见并可滚动
在我的布局中保留一个列很容易，因此即使用户向下滚动，它也始终可见。
当页面向下滚动时，只需将页面向下移动到页面以外，也很容易，因为它在滚动开始之前锚定。
我的问题是，我的左栏比平均窗口高 ，因此您需要向下滚动才能看到左栏中的所有内容（控件），但是在向上滚动的同时您要查看再次控制顶部。
以下是我想要完成的视觉效果：
所以左列总是占据窗口高度的100％，但是当用户向下滚动时，他们可以看到div的底部，并且当他们开始向上滚动滚动直到它再次到达窗口的顶部时。 所以无论他们滚动页面多远，div的顶部总是在附近。
有没有一些jQuery魔术来实现这一点？
你的意思是这样吗？ （演示）
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%;
}
它也会优雅地降解......
我为你做了一个小提琴，希望这可以帮助你升职。 我检测到向上滚动或向下滚动，并将方位fixed位置折叠。
http://jsfiddle.net/8eruY/
CSS
aside {
position:fixed;
height:140%;
background-color:red;
width:100px;
top:20px;
left:20px;
}
使用Javascript
//检测用户向下滚动或在jQuery中向上滚动
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('html').bind(mousewheelevt, function(e){
var evt = window.event || e //equalize event object
evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible
var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
if(delta > 0) {
$('aside').css('top', '20px');
$('aside').css('bottom', 'auto');
}
else{
$('aside').css('bottom', '20px');
$('aside').css('top', 'auto');
}
});
http://jsfiddle.net/KCrFe/
或这个：
.top-aligned {
position: fixed;
top: 10px;
}
同
var scrollPos
$(window).scroll(function(event){
var pos = $(this).scrollTop();
if ( pos < scrollPos){
$('.sidebar').addClass('top-aligned');
} else {
$('.sidebar').removeClass('top-aligned');
}
scrollPos = pos;
});