修复了 div 处滚动停止的侧边栏答案

【问题标题】：Fixed sidebar on the scroll stop at div修复了 div 处滚动停止的侧边栏
【发布时间】：2014-01-28 14:33:50
【问题描述】：

我尝试确保 div“过滤器”在滚动时固定，然后在下降到“outside_footer_wrapper”时停止。使用以下脚本但无法使其工作？

$(function() {
        var top = $('#filter').offset().top - parseFloat($('#filter').css('marginTop').replace(/auto/, 0));
        var footTop = $('#outside_footer_wrapper').offset().top - parseFloat($('#outside_footer_wrapper').css('marginTop').replace(/auto/, 0));

        var maxY = footTop - $('#filter').outerHeight();

        $(window).scroll(function(evt) {
            var y = $(this).scrollTop();
            if (y > top) {
                if (y < maxY) {
                    $('#filter').addClass('fixed').removeAttr('style');
                } else {
                    $('#filter').removeClass('fixed').css({
                        position: 'absolute',
                        top: (maxY - top) + 'px'
                    });
                }
            } else {
                $('#filter').removeClass('fixed');
            }
        });
    });

【问题讨论】：

标签： javascript css scroll fixed

【解决方案1】：

如果您想在到达页脚后停止position:fixed，您可以使用top 进行类似的伪装：

$(function() {
    var top = $('#filter').offset().top,
        footTop = $('#outside_footer_wrapper').offset().top,
        maxY = footTop - $('#filter').outerHeight();
    $(window).scroll(function(evt) {
        var y = $(this).scrollTop();
        if (y > top) {
            $('#filter').addClass('fixed').removeAttr('style');
            if (y > maxY-20){
             var min = y - maxY + 20;
            $('#filter').css('top','-'+min+'px');
            }
       } else {
            $('#filter').removeClass('fixed');
        }
    });
});

还要注意 fixed 类的 CSS，您需要使用与 #filter 相同的特异性来实现这一点我做了这个更改：

#sidebar #filter.fixed /*Add #sidebar*/

检查一下Demo Fiddle

【讨论】：

谢谢，这正是我所追求的:)
很高兴帮助你@LarsHolmqvist

【解决方案2】：

如果您知道过滤器必须在哪个像素编号处固定以及页脚从哪个像素编号开始，您可以尝试此功能：

scrollTop

【讨论】：

【解决方案3】：

是这样的吗？

jsfiddle

// get box div position
var box = document.getElementById('box').offsetTop;

window.onscroll = function(){

    // get current scroll position
    var scroll_top = document.body.scrollTop || document.documentElement.scrollTop;

    document.getElementById('scbox').innerText = scroll_top + ' ' + box;

    // if current scroll position >= box div position then box position fixed
    if(scroll_top >= box)
        document.getElementById('box').style.position = 'fixed';
    else
        document.getElementById('box').style.position = 'relative';


}

【讨论】：

【解决方案4】：

试试这个：

#sidebar {
 position: fixed;
}

jsfiddle here

【讨论】：