使用纯javascript将绝对定位的元素放在窗口顶部答案

【问题标题】：Place absolutely positioned element at top of window using pure javascript使用纯javascript将绝对定位的元素放在窗口顶部
【发布时间】：2013-10-08 23:42:27
【问题描述】：

我需要在纯 javascript 中将绝对定位的元素（它相对于主体绝对定位）放置在窗口顶部，而不是主体的顶部。

不能是固定位置，只能是绝对位置。我目前正在使用一些 hackish 方法来执行此操作：

var timeOut;
function scrollToTop() {
    if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
        window.scrollBy(0,-50);
        timeOut=setTimeout('scrollToTop()',10);
    }
    else clearTimeout(timeOut);
}

还有……

onclick="scrollToTop();return false"

... 显示一个绝对定位的 div。

现在，根据用户在页面上的位置，我需要窗口出现在浏览器窗口的顶部，而不是文档的顶部。我知道如何在 jQuery 中做到这一点，但我想不出 javascript 中的方法。

任何帮助将不胜感激！

【问题讨论】：

您是要滚动窗口还是定位 div？你说你知道怎么用 jQuery 做，你能把你的 jQuery 解决方案贴出来吗？
只需将 div 放在浏览器窗口的顶部即可。而且它只会做一次，而不是坚持到底。span>

标签： javascript css window positioning absolute

【解决方案1】：

像这样？每次单击按钮（固定）时，都会在窗口顶部添加一个产品菜单栏 div。

http://jsfiddle.net/kmFQD/1

代码：

function insertAtTop()
{
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "Product Menu Bar";
    newDiv.className = "productMenuBar";
    newDiv.style.top = pageYOffset + "px";

    document.body.appendChild(newDiv);
}

【讨论】：

我认为我们在这里是在正确的道路上，但它是一个直到单击按钮才添加的元素。
我的答案和 JSFiddle 已被编辑以解决之前的评论。