需要一个CSS解决方案来保持页面滚动的左上角(不是位置:固定)

我需要打开/关闭一个div容器，无论我在页面滚动的页面上的哪个位置，该容器都将始终出现在左上角。固定位置在桌面环境中是可以接受的，但在移动环境中，我需要用户能够向上或向下移动div 容器，以便他们可以进入其他输入字段。如果我使用绝对位置，如果您在页面底部向下滚动，div 容器可能会显示在视野之外。

使用固定...移动设备弹出键盘将覆盖较低的输入字段。如果将位置更改为绝对，则可以看到视图外问题。https://jsfiddle.net/r71vb73u/15/

 #workarea {
 width: 160px;
 padding: 5px;
 height: 400px;
 position: fixed;
 background: #cccccc;
}
.input1 {
 height: 90%;
}
.input2 {
 height: 10%;
}
.blah {
 float: left;
}
.buttons {
 float: right;
}
.filler {
 clear: both;
 height: 800px;
}
function workarea(action) {
  if (action == 'open') {
    document.getElementById('workarea').style.display = '';
  } else {
    document.getElementById('workarea').style.display = 'none';
  }
}
<body>
  <div id="workarea">
    <div class="input1">
      <input type="text" value="hello">
    </div>
    <div class="input2">
      <input type="text" value="world">
    </div>
  </div>
  <div class="blah">blah blah ...</div>
  <div class="buttons">
    <input type="button" value="Open" onMouseDown="workarea('open');">
    <input type="button" value="Close" onMouseDown="workarea('close');">
  </div>
  <div class="filler"></div>
  <div class="blah">blah blah ...</div>
  <div class="buttons">
    <input type="button" value="Open" onMouseDown="workarea('open');">
    <input type="button" value="Close" onMouseDown="workarea('close');">
  </div>
</body>

好吧，

这不是我的最终答案，但是当您在移动环境中提到时，我得到了空白。但首先我让你看到我的第一个答案。我会不断更新，直到你说这是一个正确的答案。查看演示

#workarea {
  width: 160px;
  padding: 5px;
  position: fixed;
  background: #cccccc;
  left:0;
  top:0;
  bottom:0;
}

演示

看起来我可以将以下内容添加到打开的 javascript 操作中：

document.getElementById('workarea').style.top = document.body.scrollTop + 10 + 'px';

这会使用绝对位置将工作区置于当前顶部。

https://jsfiddle.net/r71vb73u/28/

相关内容

最新更新

热门标签：