固定边栏在滚动停止在div [英] Fixed sidebar on the scroll stop at div

问题描述

我尝试确保div过滤器在滚动时变得固定，然后停止到outside_footer_wrapper。使用以下脚本但不能让它工作？

I try to make sure that a div "filter" becomes fixed when scrolling and then stop when it comes down to "outside_footer_wrapper". use the following script but can not get it to work?

jsfiddle

jsfiddle

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

推荐答案

如果要停止 position：fixed 到达页脚后，您可以使用顶部：
$ b

If you want to stop the position:fixed after you reach the footer you can do something like this faking with the 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');
        }
    });
});

还要注意CSS的 fixed 你需要使之与#filter的同等的特异性我做了这个变化：

Also take in care with the CSS for the class fixed you need to make that with equal specificity of #filter I made this change:

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

检查 演示小提琴

Check This Demo Fiddle

这篇关于固定边栏在滚动停止在div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！