我对我的脚本有疑问。我制作了一个脚本，使我们能够在用户向下滚动我们的页面之一时使标题停留在用户窗口的顶部。它会这样做 5 秒钟，然后返回到页面顶部的原始空间。只有一个问题，目前页眉在其他内容之上开始，但在正确的位置结束。这里有人知道如何解决这个问题吗？我认为我的问题是我需要在有人向下滚动并且倒计时仍高于零时修复标题。只要满足其中一个条件而没有其他条件，标题仍然需要是静态的。有人知道如何做到这一点。目前我的代码的结果是: http://scripts.semilo.com/mitchel/TEST_v14_multisize_LS.html
以及代码本身:
<html>
<head>
<style>
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
header {
position: fixed;
text-align: center;
font-size: 16px;
line-height: 30px;
height: auto;
width: 100%;
padding-bottom: 20px;
background: #335C7D;
color: #a3ff00;
font-family: 'PT Sans', sans-serif;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
</style>
</head>
<body>
<header id="myHeader">
<h1>
<div>
<script src='https://www.googletagservices.com/tag/js/gpt.js'>
googletag.pubads().definePassback('/4217/semilo.smulweb.nl', [[728, 90], [970, 250]]).setTargeting('campaign', [2017654321]).display();
</script>
</div>
<div id="teller"; style="position:static; height:20px; width:100%; text-align:center; font-size: 14px; color:#a3ff00; font-style: sansita"> Deze ad verdwijnt in <span id="countdowntimer">5 </span> Seconden</div>
<script type="text/javascript">
var timeleft = 5;
var myHeader = document.getElementById('myHeader');
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0){
myHeader.style.position = "static";
clearInterval(downloadTimer);
teller.style.display = "none";
}
},1000);
</script>
</h1>
</header>
<img src="http://scripts.semilo.com/mitchel/Weersverwachting.png" width="auto" height="auto" />
</body>
</html>最佳答案
检查以下代码:
<html>
<head>
<script type="text/javascript">
var timeleft = 5;
var mySpace = document.getElementById('space');
var myHeader = document.getElementById('header');
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0){
document.getElementById("space").style.display = "none";
document.getElementById("countdowntimer").style.display = "none";
document.getElementById("header").style.position = "initial";
clearInterval(downloadTimer);
}
},1000);
</script>
<style>
body {
margin: 0;
}
.header {
background-color: gray;
height: 10%;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="header" id="space"></div>
<div class="header" id="header" style="position:fixed">
<span id="countdowntimer">5</span>
</div>
<img src="http://scripts.semilo.com/mitchel/Weersverwachting.png" width="auto" height="auto">
</body>
</html>
关于javascript - 固定标题错误定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42346866/