Javascript 保持左栏可见并可滚动

在我的布局中很容易固定一列，这样即使用户向下滚动，它也始终可见

当页面向下滚动到足以使其脱离视口时，也很容易将列向下移动到页面上，因此在滚动开始之前将其定位

我的问题是，我的左列比平均窗口高，，因此您需要能够向下滚动查看左列中的所有内容（控件），但同时，当您向上滚动时，您希望再次看到控件的顶部

以下是我想要完成的视觉效果：

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

---

有什么jQuery的魔力可以让这一切发生吗？

我为你做了一把小提琴，希望这能帮你一点忙。 我检测到向上或向下滚动，并根据方向设置

固定的
位置


CSS

aside {
    position:fixed;
    height:140%;
    background-color:red;
    width:100px;
    top:20px;
    left:20px;

}

Javascript

//


或者这个：

.top-aligned {
    position: fixed;
    top: 10px;
}

与

var scrollPos
$（窗口）。滚动（功能（事件）{
var pos=$（this.scrollTop（）；
如果（位置<滚动位置）{
$（'.sidebar'）.addClass（'top-aligned'）；
}否则{
$（'.sidebar'）.removeClass（'top-aligned'）；
}
滚动位置=位置；
});
你的意思是这样的吗

它几乎也会优雅地退化…
我建议您研究一下twitter引导，它可以毫不费力地解决这个问题。@abc123:真的吗？参考资料？我对bootstrap很熟悉，但我不记得在实际操作中见过它。你能给我指一个他们展示这一点的页面吗？abc123认为Bootstrap的粘贴插件可以做到这一点，但它做不到-它只会在页面上粘贴一个元素，如果它在视口上方。我不知道有什么插件可以满足你的需要（这是一个非常好的效果），所以你可能不得不这么做yourself@minitech正如bojangles指出的那样，我认为通过进一步研究，词缀插件可以做到这一点，但我错了。因为这已经有4条评论了，所以我不会删除我的，因为我会为这篇文章保留一个清晰的评论历史。你是我的英雄-工作完美，这正是我需要的。非常感谢。
.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;
});

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);