倒计时后停止固定标题

Question

我想知道是否有人能够帮我解决我目前遇到的编码问题。我刚刚开始编码，但被要求做一个位置固定的标题，并在倒数到零后停止修复。所以它需要再次回到页面的顶部。我能够倒计时和一个固定的标题，但在倒数计数到零后无法停止。这里有人对我应该如何实现这个目标有个想法吗？ 。

剧本我到目前为止有：

var timeleft = 5, 
 
    downloadTimer = setInterval(function() { 
 
     timeleft--; 
 
     document.getElementById("countdowntimer").textContent = timeleft; 
 
     if(timeleft <= 0) { 
 
     clearInterval(downloadTimer); 
 
     } 
 
    }, 1000);

/** * 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: 200px; 
 
    height: 200px; 
 
    width: 100%; 
 
    background: #335C7D; 
 
    color: #a3ff00; 
 
    font-family: 'PT Sans', sans-serif; 
 

 
    // set animation 
 
    -webkit-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
}

<header> 
 
    <h1> 
 
    <div> 
 
     <img src="http://scripts.semilo.com/mitchel/TEST_728x90.png"width="728" height="90"/> 
 
    </div> 
 
    <div style="height:20; width:100%; text-align:center; font-size: 14px; color:#a3ff00; font-style: sansita"> 
 
     Deze ad verdwijnt in <span id="countdowntimer">5 </span> Seconds</div> 
 
    </h1> 
 
</header> 
 

 
<img src="http://scripts.semilo.com/alex/semilologo.png" width="782" height="2000" alt="Big Image" />

Answer 1

你只需要在间隔结束添加新style.position值。

header{ 
 
     position: fixed; 
 
      text-align: center; 
 
      font-size: 16px; 
 
      line-height: 200px; 
 
      height: 200px; 
 
      width: 100%; 
 
      background: #335C7D; 
 
      color: #a3ff00; 
 
      font-family: 'PT Sans', sans-serif; 
 

 
      // set animation 
 
      -webkit-transition: all 0.4s ease; 
 
      transition: all 0.4s ease;

<header id="myHeader"> 
 
<h1> 
 
<div> 
 
<img src="http://scripts.semilo.com/mitchel/TEST_728x90.png"width="728" height="90"/> 
 
</div> 
 

 
<div style="height:20; width:100%; text-align:center; font-size: 14px; color:#a3ff00; font-style: sansita"> Deze ad verdwijnt in <span id="countdowntimer">5 </span> Seconds</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);  
 
    } 
 
},1000); 
 
</script> 
 
</h1> 
 
</header> 
 

 
<img src="http://scripts.semilo.com/alex/semilologo.png" width="782" height="2000" alt="Big Image" />