需要一个 CSS 解决方案来保持页面滚动的左上角（不是位置：固定）答案

【问题标题】：Need a CSS solution to stay top left with page scrolling (not position:fixed)需要一个 CSS 解决方案来保持页面滚动的左上角（不是位置：固定）
【发布时间】：2016-06-08 03:32:06
【问题描述】：

我需要打开/关闭一个始终显示在左上角的 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>

【问题讨论】：

Javascript / jQuery sticky without using css position: fixed的可能重复
有没有没有jQuery库的解决方案？没关系！！！在那个例子中我没有看到任何 jQuery。

标签： css

【解决方案1】：

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

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

DEMO

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：