保持左列可见且可滚动

Question

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

当页面向下滚动足够远以使其离开视口时，也很容易将列向下移动到页面，因此它在滚动开始之前就已锚定 。

我的问题是，我的左手栏比平均窗口高 ，所以你需要能够向下滚动才能看到左栏中的所有内容（控件），但同时当你向上滚动时你想要看到再次控制的顶部。

这是我想要实现的目标：

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

是否有一些jQuery魔法可以实现这一目标？

Answer 1

你的意思是这样的吗？ （演示）

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

它也几乎降级优雅......

Answer 2

我为你做了一个小提琴，希望这可以帮助你升职。 我检测到向上滚动或向下滚动，并将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');
    }   
});

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