如何在JS

Question

假设我们有一个长的可滚动页面和一个单独的侧块，它比页面短，但比屏幕高度长。

我试图让侧边栏始终位于屏幕内部。

向下滚动时，侧边栏会滚动，直到将其固定在屏幕底部：

然后，如果向上滚动，它将滚动，直到用顶部固定：

所以侧边栏永远不会离开屏幕。 它与bootstrap词缀类似，但具有滚动功能。 似乎是一个常见的功能，看到很少有这种行为的网站，我很惊讶我找不到准备好的实现。 我无法做到正确，总是在异常情况下发现新的错误。 也许某些库中有现成的解决方案？

Answer 1

今天我意识到我不需要＆＃34;修复＆＃34; positon并可以更新每个滚动的偏移量。 如果有人会搜索相同的问题，这是我的代码。

HTML：

<div id="screen">
    <div id="page">
    </div>

    <div id="sidebar">
    </div>
</div>

JS：

var margin = 0;
var sidebarIsFixed = false;
var lastScroll = 0;
var topOffset = 0;

var sidebar = document.getElementById('sidebar');
var screen = document.getElementById('screen');
var yPos = undefined;

function OnBodyScroll() {
    if (yPos == undefined) {
        yPos = 0;
        var parent = sidebar.offsetParent;
        while (parent && parent != screen) {
            yPos += parent.offsetTop;
            parent = parent.offsetParent;
        }
        margin = sidebar.offsetTop;
        topOffset = margin;
    }
    var windowHeight = screen.clientHeight;
    var barHeight = sidebar.clientHeight;
    var scroll = screen.scrollTop;

    if (scroll >= lastScroll) {
        if (scroll + windowHeight > yPos + topOffset + barHeight + margin) {
            topOffset = scroll -yPos + windowHeight - barHeight - margin;
            sidebar.style.marginTop = topOffset + "px";
        }
    } else {
        if (scroll < yPos + topOffset - margin) {
            topOffset = scroll - yPos + margin;
            if (topOffset < margin) {
                topOffset = margin;
            }
            sidebar.style.marginTop = topOffset + "px";
        }
    }

    lastScroll = scroll;
}

screen.onscroll = OnBodyScroll;
OnBodyScroll();

http://jsfiddle.net/ilyad/da543f40/3/