Исправление заголовка с помощью JavaScript после прокрутки заголовок 100VH: ⇐ Html

[Anonymous]

Я пытаюсь сделать заголовок, который остается фиксированным, когда я прокручиваю вниз, но он идет только до конца заголовка, который устанавливается на 100vh . Есть ли у кого-нибудь представление о том, как я могу решить это, не останавливаясь, используя min-height? Заголовок, но без успеха. < /p>

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function() {
const nav = document.getElementById('mainNav'); // Certifique-se de que o ID está correto
const header = document.querySelector('.header');

function handleScroll() {
const headerHeight = header.offsetHeight;
const scrollPosition = window.scrollY;

if (scrollPosition > headerHeight) {
nav.classList.add('fixed');
} else {
nav.classList.remove('fixed');
}
}

window.addEventListener('scroll', handleScroll);
});< /code>
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url('img/background-main.jpg');
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
position: relative;
}

nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;

z-index: 1000;
}

nav.fixed {
position: fixed;
top: 0;
left: 0;
z-index: 1001;
}

nav img {
width: 200px;
}

.nav-links {
flex: 1;
text-align: right;
}

.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;

}

.nav-links ul li a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}

.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: #1b99ca;
display: block;
margin: auto;
transition: 0.5s;
}

.nav-links ul li:hover::after {
width: 100%;
}

.nav-links ul li:hover>ul.dropdown {
display: block;
}

ul li ul.dropdown {
position: absolute;
top: 100%;
left: 0;
background-color: rgba(41, 145, 255, 0.425);
z-index: 999;
display: none;
min-width: 130px;
border-radius: 5px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

ul li ul.dropdown li {
display: block;
padding: 10px;
}

ul li ul.dropdown li a {
color: #fff;
text-decoration: none;
display: block;
font-size: 14px;
font-weight: 600;
transition: 0.3s;
text-align: left;
}

ul li ul.dropdown li:hover {
background: #003580;
}

.text-box {
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

.text-box h1 {
font-size: 62px;
}

text-box p {
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
}

.hero-btn {
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
transition: 0.6s;
margin-top: 15px;
border-radius: 5px;
}

.hero-btn:hover {
background-color: #1b99ca;
border: 1px solid #1b99ca;
transition: 1s;
}

nav .fa {
display: none;
}

nav .fa-bars {
font-size: 25px;
}< /code>
[*]






[url=index.html]  [i][/url]

[/i]
[list]
[url=index.html]Início[/url]
[*]
[url=#]Sobre[/url]

[url=sobre.html]A Empresa[/url]
[*][url=equipe.html]Equipe[/url]
[/list]

[*]
[url=services/services.html]Serviços[/url]
[list]
[url=services/marine.html]Marine[/url]
[*][url=services/log.html]Logística[/url]
[*][url=services/desp-adua.html]Despacho Aduaneiro[/url]
[*][url=services/comex.html]Comex[/url]
[*][url=services/outros.html]Outros[/url]
[/list]

[*][url=contacts.html]Contato[/url]


[i][/i]


Conheça a JL Marine!
Confiabilidade & Excelência
[url=sobre.html]Saiba Mais[/url]

Подробнее здесь: https://stackoverflow.com/questions/794 ... 0vh-header