保持左列可见且可滚动答案

【问题标题】：Keep left column visible AND scrollable保持左列可见且可滚动
【发布时间】：2013-07-10 22:16:03
【问题描述】：

在我的布局中保持一列固定很容易，因此它始终可见，即使用户向下滚动也是如此。

仅当页面向下滚动到足以使其超出视口时才将列向下移动也很容易，因此它在滚动开始之前锚定。

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

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

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

是否有一些 jQuery 魔法来实现这一点？

【问题讨论】：

我建议你看看 twitter bootstrap，它可以毫不费力地解决这个问题。
@abc123：真的吗？参考？
我对 bootstrap 很熟悉，但我不记得在实际中看到过这个。你能指点我到他们展示这个的页面吗？
abc123 认为 Bootstrap 的 Affix 插件可以做到这一点，但它不能——它只会将一个元素粘贴到页面上，如果它超出了视口。我不知道有什么插件可以做你想做的（这是一个非常好的效果），所以你可能不得不自己做
@minitech 正如 bojangles 所指出的，我认为 Affix 插件可以在进一步研究后做到这一点，但我错了。由于这已经消失了 4 cmets 深，我不会删除我的，以便为这篇文章保留清晰的评论历史记录。

标签： javascript jquery css

【解决方案1】：

你的意思是这样的吗？ (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%;
}

它也几乎优雅地退化了……

【讨论】：

你是我的英雄 - 完美运行，正是我所需要的。谢谢！

【解决方案2】：

我为你做了一个小提琴，希望这对你有所帮助。我检测到向上滚动或向下滚动，并将 fixed 位置手风琴设置为方向。

http://jsfiddle.net/8eruY/

CSS

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

}

Javascript

//Detect user scroll down or scroll up in 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');
    }   
});

【讨论】：

【解决方案3】：

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

【讨论】：