Question

我正在尝试注入横幅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并在执行上面的行之前将它们更改为relative，但横幅仍不起作用。错误如下图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>");

Answer 2

请维护横幅div的z-index.Z-index应该大于该页面上的其他div。

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

Answer 3

我想提出一种不同的方式来创建元素：

var $banner = $('<div/>', { 'id' : 'banner' });
$('body').prepend($banner);

当你有几个不同的元素要创建时，这种用jquery创建元素的技术会派上用场。作为注释，您还可以像这样创建元素：

var $banner = $('<div/>').attr('id', 'banner');

Answer 4

我认为最好的方法是首先让你的广告保持相对位置，当一个人滚动页面你的功能检查页面滚动.scrollTop（）然后在横幅广告容器上添加固定位置就像冻结标题，如果你需要进一步帮助这方面让我知道，我会为您提供代码。谢谢，我希望这项技术可以帮助你

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

4 个答案: