javascript - jquery - 在现有网页上插入标题部分

Question

我正在尝试注入(inject)横幅 div

<div id='banner'></div>

以这样一种方式在现有网页的顶部，以便当人们滚动网页时，横幅仍然在顶部。此外，网页应该被横幅向下推，以便页面的每个部分都可以访问。

这是我的 CSS:

#banner {
position:fixed; 
display:block; 
top:0px; 
background-color:#FFFFFF; 
width:100%; height:250px; 
border:2px solid; 
}

这是我的 jquery:

$("body").prepend("<div id='banner'></div>");

我尝试使用 jquery 查找所有固定的 div，并在执行上述行之前将它们更改为相对的，但横幅仍然不起作用。报错如下图https://drive.google.com/file/d/0B0sCu8aj8zu2akhtcEdtajJJZEU/edit?usp=sharing

请帮助。

我不是在寻找广告收入，这只是一个练习任务。

Answer 1

这是一个jsFiddle我创造了。横幅 div 位于页面顶部。

它在滚动时停留在顶部。

HTML:

<div class="page">
</div>

CSS:

.oldBody
{
    width:100%;
    height: 3000px;
    background-color: navy;
    margin-top:250px;
}

#banner 
{
    position:fixed; 
    top:0px; 
    background-color:#FFFFFF; 
    width:100%; 
    height:250px; 
    border:2px solid; 
    z-index:10000;
}

JS:

$("body").wrapAll("<div class='oldBody'></div>");
$("body").prepend("<div id='banner'></div>");