主要是让“Div”自主地跟随主滚动条滚动

要实现让一个元素（如“Div”）自主地跟随主滚动条滚动，可以使用JavaScript来监听滚动事件，并根据滚动条的位置来动态改变该元素的位置。

以下是一个使用JavaScript实现的示例代码：

HTML部分：

<div id="main-content">
  <!-- 主内容区域 -->
</div>
<div id="sidebar">
  <!-- 侧边栏内容 -->
</div>

CSS部分：

#main-content {
  height: 800px; /* 设置主内容区域的高度，以便产生滚动条 */
  overflow-y: scroll; /* 显示垂直滚动条 */
}

#sidebar {
  position: absolute; /* 绝对定位，以便可以自由移动位置 */
  top: 0; /* 初始位置在顶部 */
  right: 0; /* 初始位置在右侧 */
  width: 200px; /* 侧边栏宽度 */
  height: 100%; /* 与主内容区域高度保持一致 */
  background-color: #f2f2f2; /* 侧边栏背景色 */
}

JavaScript部分：

// 获取主内容区域和侧边栏的DOM元素
var mainContent = document.getElementById('main-content');
var sidebar = document.getElementById('sidebar');

// 监听主内容区域的滚动事件
mainContent.addEventListener('scroll', function() {
  // 获取滚动条的垂直位置
  var scrollTop = mainContent.scrollTop;

  // 设置侧边栏的位置为距离顶部的距离
  sidebar.style.top = scrollTop + 'px';
});

上述代码中，通过监听主内容区域的滚动事件，在滚动时获取滚动条的垂直位置（scrollTop），然后将这个位置设置为侧边栏的顶部位置（top），从而实现了侧边栏随滚动条滚动的效果。

你可以根据实际情况，调整代码中的元素ID和样式，以适应你的需求。