html----响应式布局，左侧栏目固定, 左侧边栏可以动态调整宽度，右侧内容随着屏幕宽度变化而变化，左侧边栏和顶部导航栏固定不会随着滑动

要实现这种响应式布局，可以使用CSS的flexbox布局。首先，将整个页面分为左侧边栏和右侧内容两部分，使用flexbox布局将它们排成一行。并且设置左侧边栏的宽度为固定的值，右侧内容的宽度为自适应的值：

<div class="container">
  <div class="sidebar">左侧边栏</div>
  <div class="content">右侧内容</div>
</div>

.container {
  display: flex;
  flex-wrap: nowrap;
}
.sidebar {
  width: 200px; /* 左侧边栏宽度固定 */
  flex-shrink: 0;
}
.content {
  flex-grow: 1; /* 右侧内容宽度自适应 */
}

接下来，实现左侧边栏可以动态调整宽度。可以使用JavaScript监听鼠标移动事件，当鼠标在左侧边栏和右侧内容的分界线上按下并拖动时，改变左侧边栏的宽度，右侧内容的宽度也会随之自适应。同时，顶部导航栏和左侧边栏可以使用CSS的position属性设置为固定，不会随着滑动而移动：

<div class="container">
  <div class="header">顶部导航栏</div>
  <div class="sidebar">左侧边栏</div>
  <div class="content">右侧内容</div>
</div>

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
}
.sidebar {
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  width: 200px;
  flex-shrink: 0;
}
.content {
  margin-left: 200px; /* 右侧内容的左边距为左侧边栏的宽度 */
}

var isDragging = false;
var container = document.querySelector('.container');
var sidebar = document.querySelector('.sidebar');
var content = document.querySelector('.content');
var startX = 0;
var startWidth = 0;

sidebar.addEventListener('mousedown', function(e) {
  isDragging = true;
  startX = e.pageX;
  startWidth = sidebar.offsetWidth;
});

document.addEventListener('mousemove', function(e) {
  if (!isDragging) {
    return;
  }
  var newWidth = startWidth + (e.pageX - startX);
  sidebar.style.width = newWidth + 'px';
  content.style.marginLeft = newWidth + 'px';
});

document.addEventListener('mouseup', function(e) {
  isDragging = false;
});

这样就可以实现左侧栏目固定，左侧边栏可以动态调整宽度，右侧内容随着屏幕宽度变化而变化，左侧边栏和顶部导航栏固定不会随着滑动。