0
I’m trying to make a fixed timer that sits at the top of the page as the page goes down, but when I change the top margin of Section#content the header goes down instead of being fixed, I’ve tried to use all the position options in the header, Static even leaves exactly as I would like but when descending the page it does not follow, I tried to use div instead of Ction, I tried to make the red band of the timer stay in a div instead of the header, I tried to leave the track inside the body and did not help either.
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function() {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = `00 : ${minutes} : ${seconds}`
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function() {
var duration = 60 * 5; // Conversão para segundos
var display = document.querySelector("#timer"); // Elemento para exibir o timer
startTimer(duration, display); // Inicia função
}* {
font-family: "Arial", sans-serif;
font-size: 16px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.479);
color: blue;
margin: 0px;
padding: 0px;
}
header {
background-color: rgba(155, 29, 32, .8);
height: 50px;
padding: 15px;
width: 100%;
position: fixed;
}
div#head {
background-color: rgba(0, 0, 0, 0);
width: 100%;
position: fixed;
color: white;
}
div#timer {
background-color: rgba(0, 0, 0, 0);
color: #ffffff;
width: 40%;
margin: auto;
margin-top: 0px;
font-size: 50px;
font-weight: 600;
}
section#fundo {
height: 1000px;
background-image: url(imagembackground2.png);
background-repeat: no-repeat;
}
section#conteudo {
background-color: white;
border-radius: 10px;
margin: auto;
margin-left: 100px;
margin-top: 50px;
height: auto;
padding: 15px;
width: 300px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.479);
}<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Projeto Zero</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
<div id="head">
<div id="timer">
<script src="timer.js" defer></script>
</div>
</div>
</header>
<body>
<section id="fundo">
<section id="conteudo">
<p>
<div id="texto">
Lorem ipsum justo suscipit sit habitant purus donec, tempus curae commodo pretium conubia pulvinar, metus class turpis mollis sed morbi. hac etiam non nisl mollis faucibus ultrices morbi tempor, duis cursus commodo fringilla justo sit neque. semper molestie
gravida etiam curae varius malesuada a morbi tellus, sodales dapibus risus quisque velit massa convallis nullam, tristique hac ultricies consequat ut maecenas eros egestas. tortor quam imperdiet auctor fermentum aptent eu mattis, aenean vulputate
luctus lectus eget commodo pellentesque varius, donec tempor fames vel et magna. eros ornare venenatis fermentum praesent luctus sociosqu erat inceptos, augue potenti ante senectus suspendisse imperdiet proin enim dolor, aenean felis lorem nisl
fames vivamus eu.
</p>
</div>
</section>
</section>
</body>
</html>