Javascript 滚动屏幕时更改容器的宽度

我正在开发这个网站

任务是，我想改变中心块的宽度，当它到达边栏的末端时（截图）

提前谢谢你！

---

当用户滚动到元素末尾时，以下是更改容器或content div块的宽度的简单方法：

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#sidebar'); // when user reach the end of sidebar
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $(".yourDiv").css('width', '1000px'); // check if the user reached to the end of sidebar, if yes then change the width of your div.
       } else {
          $('.yourDiv').css('width', '630px'); // if the user hasn't reached to the end of sidebar or he scrolled back, this is the default width value.
       }
   });
    }
});

---

你试过什么了吗？我找到了解决办法，但只有当我按下按钮时它才起作用$（'button'）。在（'click'，function（）{$（'.box'）。toggleClass（'change'）；}）。高度{背景颜色：红色；宽度：300px；最大高度：500px；}。宽度{最大宽度：200px；高度：50px；背景：绿色；}。更改{高度{最大高度：1000px；}宽度{最小宽度：1000px；}，所以这不是我需要的。只是不知道从哪里开始。我想我需要一种锚，锚的宽度会改变