Feste Kopfzeile falsche Positionierung

Ich habe eine Frage zu meinem Skript. Ich habe ein Skript erstellt, das es uns ermöglicht, die Kopfzeile so zu gestalten, dass sie im oberen Bereich eines Benutzerfensters bleibt, wenn sie auf einer unserer Seiten nach unten scrollen. Es tut dies für 5 Sekunden und geht dann zu seinem ursprünglichen Platz oben auf der Seite zurück. Es gibt nur ein Problem, im Moment beginnt der Header über dem anderen Inhalt, endet aber am richtigen Ort. Weiß jemand hier, wie man das repariert? Ich denke, mein Problem ist, dass ich den Header in dem Moment fixieren muss, in dem jemand scrollt und wenn der Countdown immer noch über Null ist. Sobald nur eine dieser Bedingungen erfüllt ist, muss die Kopfzeile immer noch statisch sein. Weiß jemand, wie man das möglich macht? Das Ergebnis meines Code ist im Moment: http://scripts.semilo.com/mitchel/TEST_v14_multisize_LS.html Feste Kopfzeile falsche Positionierung

Und der Code selbst:

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

Quelle

2017-02-20 Mitchel

Es gibt hier mehrere Optionen. Sie können beispielsweise dem oberen Bereich des Inhalts einen leeren Bereich hinzufügen und ihn nach 5 Sekunden entfernen. Wenn nicht, dann könntest du die '''s Höhe und Spitze ändern. – user7393973

Schauen Sie sich den folgenden Code ein:

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

Quelle

2017-02-20 15:03:07 user7393973

Dies könnte ein bisschen lang, aber es macht den Trick, wählen Sie daraus, was Sie brauchen (ich denke, Ihre Frage ist wirklich nur bezogen auf den CSS-Teil davon).

Das Banner ist für die ersten 5 Sekunden klebrig, wenn Sie also scrollen, kommt es mit Ihnen, dann rutscht nach oben.

Wenn Sie bereits an der Spitze sind, passiert die Animation des Rutschens nicht.

Auch der Timer-Text verschwindet.

Hoffe, das ist hilfreich

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>

Quelle

2017-02-20 15:18:30 Brad

Ok ich dies einen besseren Blick hatte und ich denke, für Sie die Antwort.

wickelte ich den Körper der Seite in

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

Quelle

2017-02-20 17:17:28 Brad

Feste Kopfzeile falsche Positionierung

Antwort

Verwandte Themen