倒计时后停止固定标头

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" />