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

inserting a header section on an existing webpage

本文关键字：插入 标题部 网页      更新时间：2023-09-26

我正在尝试注入一个横幅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

请帮助。

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

这是我创建的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>");

请保持横幅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 
}

我只是想展示一种不同的方式来创建元素:

var $banner = $('<div/>', { 'id' : 'banner' });
$('body').prepend($banner);
当您需要创建几个不同的元素时，这种使用jquery创建元素的技术会派上用场。需要注意的是，您还可以像这样创建元素: 
var $banner = $('<div/>').attr('id', 'banner');

我认为最好的方法是首先将您的广告放在相对位置上，当一个人滚动页面时，您的功能检查page-scroll . scrolltop()，然后在横幅广告容器上添加固定位置，就像冻结头一样，如果您在这方面需要进一步的帮助，请让我知道，我会为您提供代码。谢谢，希望这个技巧对你有帮助

相关文章：