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

Refresh position left element when browser resize

本文关键字：左边 元素 位置 刷新 小时 浏览器 调整      更新时间：2023-09-26

我有以下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();
});

它工作得很好，但是当我调整浏览器窗口的大小时，问题开始于定位元素

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

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

你需要把你的条件在两个事件，它有问题，如果你只是把.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);
相关文章：