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元素。我的意思是，在resize处理程序上，与滚动处理程序完全相同...

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

Answer 2

您需要在两个事件中都设置条件，如果您只是因为它在.scroll事件中没有响应而放入.resize()事件就会出现问题，如果您单独进行可重复使用的功能：

function scrlResize(){
          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});
    }
}

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

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

2 个答案: