javascript - 保持左列可见且可滚动

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

它也几乎优雅地退化了……</p>

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