Estoy haciendo una página con bootstrap. He editado algunas cosas a mi gusto, y una de ellas es que el header par que se quede fijo al hacer scroll. El problema va que cuando le doy clic a una etiqueta <a>
del header y me hace scrollspy, el header me tapa contenido. ¿Cómo puedo hacer que no lo tape? ¿O hay otra solución?
function header(){
window.addEventListener("scroll", function(){
var header = document.querySelector(".navbar");
let logo = document.querySelector("img.logo");
let a_inicio = document.querySelector("#Inicio");
if(window.scrollY>50){
header.style.position="fixed";
header.classList.add('navbar-dark', 'bg-dark','animate__animated','animate__slideInDown');
header.style.width="100%";
header.style.zIndex="1";
logo.style.opacity="100%";
}else{
logo.style.opacity="60%";
header.classList.remove('navbar-dark', 'bg-dark','animate__animated','animate__slideInDown')
a_inicio.classList.add('active');
}
})
}
@media screen and (min-width:992px) {
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
header{
background-image: url(https://www.10wallpaper.com/wallpaper/1366x768/1309/spots_background_light_dark-Design_HD_wallpaper_1366x768.jpg);
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
padding: 0;
user-select: none;
overflow: hidden;
}
.navbar{
z-index: 1;
}
img.logo{
opacity: 60%;
}
div#container-content{
margin-top: 0.4em;
border: 1px solid black;
padding: 2vw;
height: 55vh;
}
#container-me_image{
width: 40vw;
height: 30vw;
overflow: hidden;
position: absolute;
bottom: -1px;
z-index: 0;
}
#container-me_image #me_image{
position: relative;
object-fit: cover;
width: 100%;
height: 100%;
z-index: 0;
}
.animate__slideInUp{
--animate-duration: 1s;
}
#Alert_Disabled{
position: fixed;
top: 15%;
z-index: 1;
display: none;
}
#content_arrow-up{
position: fixed;
right: 1vw;
width: 2vw;
height: 4.1vh;
bottom: 2vw;
background: url(/icon/arrow-up-circle.svg) no-repeat;
background-size: cover;
color: red;
}
#content_arrow-up:hover{
cursor: pointer;
transition: cubic-bezier(0.6, 0.04, 0.98, 0.335);
background: url(/icon/arrow-up-circle-fill.svg) no-repeat;
background-size: cover;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" contenyt="width=device-width, initial-scale=1">
<title>Mi blog</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<!--onload="header()"-->
<body onload="header()">
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light rounded-2" tabindex="0">
<header id="Inicio">
<nav id="navbar-example2" class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img class="logo" src="../img/Logo.png" alt="LOGO" width="100%" height="50px"></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 justify-content-center nav-pills">
<li class="nav-item">
<a class="nav-link" href="#Inicio">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">Primero</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Segundo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#scrollspyHeading3">Tercero</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Cuarto</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Quinto</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div></div>
<div class="container container-fluid">
<h4 id="scrollspyHeading1">Primero</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading2">Segundo</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading3">Tercero</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading4">Cuarto</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading5">Quinto</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
</div>
</div>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
</a>
<span class="mb-3 mb-md-0 text-muted">© 2022 Company, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
</ul>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>