javascript - 当浏览器调整大小时刷新左侧元素的位置

Question

我有以下 JavaScript 代码。

var x   = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width();

$(window).scroll(function(){
    var scroll = $(this).scrollTop();
    if(scroll >= x){
        $('.sidebar').addClass('active1');
        $('.active1').css({left:offsetY});
    }else{
        $('.sidebar').removeClass('active1');
        $('.active1').css({left:0});
    }
});
$(window).resize(function(){
         x = $('.sidebar').offset().top,
   offsetY = $('.left-columns').offset().left + $('.left-columns').width();
});

它工作正常，但是当我调整浏览器窗口大小时，问题就从定位元素开始

Answer 1

我不知道您想要实现什么目的，但我猜测您需要在窗口调整大小时重新定位 .sidebar1 和 .active1 元素。我的意思是，在调整大小处理程序上，执行与在滚动处理程序上执行的操作完全相同的操作...

$(window).scroll(updatePosition);
$(window).resize(updatePosition);

function updatePosition(){    

    x = $('.sidebar').offset().top,
    offsetY = $('.left-columns').offset().left + $('.left-columns').width(),
    scroll = $(this).scrollTop();

    if(scroll >= x){
      $('.sidebar').addClass('active1');
      $('.active1').css({left:offsetY});
    }else{
      $('.sidebar').removeClass('active1');
      $('.active1').css({left:0});
    }
}