Question

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

当页面向下滚动足够远以使其离开视口时，也可以轻松地向下移动页面，因此在滚动开始之前它已锚定。

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

以下是我想要完成的视觉效果： enter image description here

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

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

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

它也会优雅地降级......

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

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

保持左列可见且可滚动

3 个答案: