Question

在此处观看此视频，了解我的真正含义(Video)

现在滚动时你会注意到左栏。当我滚动到栏的底部时，条形变得粘稠，无论我滚动多远，我立即向上滚动栏向上滚动，直到它再次到达栏的顶部。

到目前为止，我确实想出了一个粘性条，但是我想要滚动条也向上滚动，直到它像facebook风格一样到达顶部。

这是我目前的代码

function stickDown($el, margin, position){

    var elPos = $el.offset().top + $el.height() + margin;

    $(window).scroll(function(){
        var winS = $(window).scrollTop();
        var winH = $(window).height();

        if(winS + winH > elPos)
            $el.attr('style', 'position:fixed;bottom:'+margin+'px;top:auto;');
        else
            $el.attr('style', 'position:'+position+';');        
    })

}

$(document).ready(function(){
    stickDown($('div#bar'), 10, 'relative');
})

Answer 1

我已经弄清楚了。这是我的新代码

var winScrTop = 0,
oldScrTop = 0;
$(window).scroll(function(){
    winScrTop = $(this).scrollTop();
    winH = $(this).height();
    $bar = $('div#bar');
    barTop = $bar.offset().top;
    barH = $bar.height();
    margin = 10;
    scrH = winScrTop + winH;
    topMar = barTop - winScrTop;
    allbar = barTop + barH + margin;
    if(winScrTop > oldScrTop){
        if(scrH > allbar && topMar < 100){
            $bar.css({
                position:'fixed',
                top: topMar+'px'
            })
        } else {
            $bar.css({
                position:'absolute',
                top: barTop+'px'
            })
        }
    } else {
        if(scrH > allbar){
            nin = winScrTop - barTop;
            $bar.css({
                position:'absolute',
                top: nin+'px'
            })
        }
        if(topMar > 99){
            $bar.css({
                position:'fixed',
                top: '100px'
            })
        }
    }
    oldScrTop = winScrTop;
})

如何创建类似Facebook的粘性条

1 个答案: