固定標題錯誤定位

我有一個關於我的腳本的問題。我製作了一個腳本，使我們能夠在頁面向下滾動時將頁眉留在用戶窗口頂部。它執行此操作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>

來源

2017-02-20 Mitchel

這裏有多種選擇。例如，您可以將空白空間添加到內容的頂部，並在5秒後將其刪除。如果不是這樣，那麼你可以改變''的高度和頂部。 – user7393973

看看下面的代碼：

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

來源

2017-02-20 15:03:07 user7393973

這可能是有點長，但它有訣竅，從它中挑選你需要的東西（我認爲你的問題只是真的與它的CSS部分有關）。

橫幅第一個5秒就粘住了，所以如果你滾動它隨你而來，然後滑動。

如果您已經位於頂部，則不會發生滑動動畫。

此外計時器文本消失。

希望這是有益

function Countdown(options) { 
 
    var timer, 
 
    instance = this, 
 
    seconds = options.seconds || 10, 
 
    updateStatus = options.onUpdateStatus || function() {}, 
 
    counterEnd = options.onCounterEnd || function() {}; 
 

 
    function decrementCounter() { 
 
    updateStatus(seconds); 
 
    if (seconds === 0) { 
 
     counterEnd(); 
 
     instance.stop(); 
 
    } 
 
    seconds--; 
 
    } 
 

 
    this.start = function() { 
 
    clearInterval(timer); 
 
    timer = 0; 
 
    seconds = options.seconds; 
 
    timer = setInterval(decrementCounter, 1000); 
 
    }; 
 

 
    this.stop = function() { 
 
    clearInterval(timer); 
 
    }; 
 
} 
 

 
var myCounter = new Countdown({ 
 
    seconds: 5, // number of seconds to count down 
 
    onUpdateStatus: function(sec) { 
 
    $("#timer>span").html(sec); 
 

 
    }, // callback for each second 
 
    onCounterEnd: function() { 
 
     if ($("body").scrollTop() > 0) { 
 
     $(".banner").slideUp("fast", function() { 
 
      $(".banner").removeClass("banner_sticky"); 
 
      $("#content").addClass("content_sticky"); 
 
      $("#timer").hide(); 
 
      $(".banner").slideDown("fast"); 
 
     }); 
 
     } else { 
 
     $(".banner").removeClass("banner_sticky"); 
 
     $("#content").addClass("content_sticky"); 
 
     $("#timer").fadeOut("fast"); 
 
     } 
 
    } // final action 
 
}); 
 

 
myCounter.start();

.banner { 
 
    height: 50px; 
 
    width: 100%; 
 
    background: green; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.banner_sticky { 
 
    position: fixed!important; 
 
} 
 

 
.content { 
 
    height: 5000px; 
 
    width: 100%; 
 
    background: lightgrey; 
 
    position: relative; 
 
    top: 60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="banner banner_sticky"> 
 
    <p id="timer">This banner will go to the top in <span>5</span></p> 
 
</div> 
 
<div class="content"><img src="http://scripts.semilo.com/mitchel/Weersverwachting.png" width="auto" height="auto"></div>

來源

2017-02-20 15:18:30 Brad

好吧我在這個更好看，並認爲我得到了答案給你。

我包的頁面的身體

<div id="content"> 
    <img src="http://scripts.semilo.com/mitchel/Weersverwachting.png" width="auto" height="auto" /> 
</div>

的Javascript

var downloadTimer = setInterval(function() { 
timeleft--; 
document.getElementById("countdowntimer").textContent = timeleft; 
if (timeleft <= 0) { 
    myHeader.style.position = "static"; 
    content.style.top = "0px"; 
    clearInterval(downloadTimer); 
    teller.style.display = "none"; 
}

CSS

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; 
    z-index:10; 
} 

#content { 
    position: relative; 
}

https://jsfiddle.net/k0b70uuu/

來源

2017-02-20 17:17:28 Brad

固定標題錯誤定位

回答

相關問題