清除Jquery css更改的大小刷新

clearing Jquery css changes on resize refresh

本文关键字:刷新 Jquery css 清除      更新时间:2023-09-26

您可以从我的示例中看到。我试图使它,当窗口的大小低于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': ''
     });
    }
});

我认为代码的主要问题不是工作的方式,因为滚动函数是在窗口调整大小函数;我认为你只需要稍微打乱一下这些东西:

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