div上下可以 跟随滚动条滚动，左右滑动的时候固定位置

这种布局通常被称为"固定侧边栏"或"粘性侧边栏"，在响应式设计中很常见。当页面内容滚动时，`div`元素会保持其相对于浏览器窗口左侧或右侧的位置不变，而上方部分则随着页面一起滚动。实现这一效果的关键在于CSS样式：

1. 使用`position: fixed;`将侧边栏定位为固定的（left或right属性设置），使其不会随页面内元素滚动。
2. 如果需要侧边栏顶部跟随滚动，可以添加`:scroll`伪类，并设置`top`属性，例如`top: 0;`。
3. 可能还需要配合`transform: translateX()`或`margin-left`来处理屏幕宽度变化时的行为。

下面是一个简单的例子：

.sidebar {
  position: fixed;
  top: 0; /* 或者其他你需要跟随滚动的距离 */
  width: 200px; /* 侧边栏宽度 */
  background-color: #f1f1f1;
  overflow-y: auto; /* 如果有滚动内容 */
  transform: translateX(-100%); /* 初始状态隐藏 */
}

.sidebar.scroll {
  transform: translateX(0); /* 当滚动到侧边栏时显示 */
}

然后在JavaScript或jQuery中添加滚动事件监听器，切换`.scroll`类：

$(window).on('scroll', function() {
  if ($(this).scrollTop() > 0) {
    $('.sidebar').addClass('scroll');
  } else {
    $('.sidebar').removeClass('scroll');
  }
});