javascript - 在调整大小刷新时清除 Jquery css 更改

Question

从我的示例中可以看出 here .我试图做到这一点，以便在将窗口调整为小于 1000px 时； CSS 被清除，因此我的 .css 文件可以接管。

如果窗口大小开始低于 1000px 则有效，但反之则无效

$(window).resize(function(){

   if ($(window).width() >= 1000) {  

        var length = $('#left').height() - $('#sidebar').height() + $('#left').offset().top;

$(window).scroll(function () {

    var scroll = $(this).scrollTop();
    var height = $('#sidebar').height() + 'px';

    if (scroll < $('#left').offset().top) {

        $('#sidebar').css({
            'position': 'absolute',
            'top': '0'
        });

    } else if (scroll > length) {

        $('#sidebar').css({
            'position': 'absolute',
            'bottom': '0',
            'top': 'auto'
        });

    } else {

        $('#sidebar').css({
            'position': 'fixed',
            'top': '0',
            'height': height
        });
    }
});

   }   
    else if ($(window).width() <= 1000) {
    $('#sidebar').css({
    'position': '',
    'bottom': '',
    'top': ''
     });
     $('#left').css({
    'position': '',
    'bottom': '',
    'top': ''
     });
    }

});

Answer 1

我认为代码无法正常工作的主要问题是滚动功能在窗口调整大小功能内；我认为您只需要稍微调整一下内容:

$(window).scroll(function () {

    if ($(window).width() >= 1000) {

        var length = $('#left').height() - $('#sidebar').height() + $('#left').offset().top;

        var scroll = $(this).scrollTop();
        var height = $('#sidebar').height() + 'px';

        if (scroll < $('#left').offset().top) {

            $('#sidebar').css({
                'position': 'absolute',
                'top': '0'
            });

        } else if (scroll > length) {

            $('#sidebar').css({
                'position': 'absolute',
                'bottom': '0',
                'top': 'auto'
            });

        } else {

            $('#sidebar').css({
                'position': 'fixed',
                'top': '0',
                'height': height
            });
        }
    }
});

$(window).resize(function(){

    if ($(window).width() < 1000) {
        $('#sidebar').css({
            'position': '',
            'bottom': '',
            'top': ''
         });
         $('#left').css({
            'position': '',
            'bottom': '',
            'top': ''
        });
    }

});