I have a container that I want to leave fixed on the page, to follow the scrolling of the page, so i put position:relative, and it worked as i wanted, but now i just made the page footer and the container overlaps the footer when i scroll the page to the end, i read that using position: sticky maybe solves the problem, but when I use the sticky property it just doesn't work. So if someone help me find a solution to solve this either using sticky or javascript, I would be very grateful.
/* Gerais */
* {
font-family: 'League Spartan', sans-serif;
}
html,body {
overflow-x: hidden;
}
body {
background-color: #545454;
color: #FFFFFF;
}
.primary-bg-color {
background-color: #545454;
}
.secondary-bg-color {
background-color: #46484B;
}
.btn-primary {
background-color: transparent;
border-color: #FFC85D;
color: #FFFFFF;
font-size: 1rem;
height: auto;
transition: .5s;
width: auto;
}
.btn-primary:hover {
background-color: #FFC85D;
border-color: #FFC85D;
}
.btn-secondary {
background-color: #FFC85D;
color: #1E1E1E;
font-size: 1.5rem;
transition: .5s;
width: 20rem;
}
.btn-secondary:hover {
background-color: #EDC77A;
border-color: #EDC77A;
color: #FFFFFF;
}
/* Navbar */
#navbar {
background-color: #1E1E1E;
}
.logo {
align-items: center;
display: flex;
justify-content: center;
}
.navbar-brand {
font-weight: 700;
margin: 0;
}
#logo-img {
height: 6rem;
width: auto;
}
#navbar-items {
align-items: center;
display: flex;
justify-content: flex-end;
min-width: 80%;
}
#navbar .navbar-nav {
align-items: center;
flex-direction: row;
}
#navbar .navbar-nav li {
margin-left: 1rem;
position: relative;
}
#navbar .nav-link {
display: flex;
}
#navbar .nav-link i {
color: #FFC85D;
font-size: 30px;
margin-left: .5rem;
}
#navbar .nav-link .bi-person-circle {
font-size: 60px;
}
#navbar a {
color: #FFFFFF;
font-size: 1.5rem;
transition: .5s;
}
#navbar a:hover {
color: #FFC85D;
}
#search-form, #news-form {
align-items: center;
border-radius: 3px;
border: 2px solid #626262;
display: flex;
height: 3.5rem;
justify-content: center;
margin: 0;
padding: 5px 15px;
width: 40%;
}
#search-form i, #news-form i {
color: #FFC85D;
font-size: 20px;
}
#search-form input, #news-form input {
background-color: transparent;
border: none;
color: #FFFFFF;
}
#search-form input:focus, #news-form input:focus{
box-shadow: none;
}
#search-form input::placeholder, #news-form input::placeholder {
color: #FFFFFF;
}
/* Jogos */
.container-fluid h1 {
font-size: 4rem;
font-weight: bold;
text-transform: uppercase;
}
/* Carousel */
.carousel-indicators {
bottom: 1rem;
position: absolute;
}
.carousel-control-prev {
height: 80%;
}
.carousel-control-next {
height: 80%;
}
/* Sobre */
.container-fluid h2 {
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
}
.container-fluid p {
font-size: 2rem;
}
/* Especificações */
#windows, #linux, #macos {
display: none;
}
#especificacoes img {
height: 1rem;
margin-right: .5rem;
}
#especificacoes nav {
height: 50px;
position: relative;
width: 100%;
}
#especificacoes nav .slider {
background-color: #46484B;
border-radius: 5px;
bottom: 0%;
height: 100%;
left: 0%;
position: absolute;
transition: all 0.3s ease;
width: 33.33%;
z-index: 0;
}
#especificacoes label {
align-items: center;
color: #FFFFFF;
cursor: pointer;
display: flex;
font-size: 1.5rem;
height: 100%;
justify-content: center;
line-height: 50px;
position: relative;
text-align: center;
transition: all 0.3s ease;
width: 100%;
z-index: 1;
}
#linux:checked ~ nav .slider {
left: 33.33%;
}
#macos:checked ~ nav .slider {
left: 66.66%
}
.content {
display: none;
}
.content span {
color: #1E1E1E;
}
#windows:checked ~ section .content-1, #linux:checked ~ section .content-2, #macos:checked ~ section .content-3 {
display: block;
}
.especificacoes-min {
border-right: 2.5px solid #1E1E1E;
padding: 1rem;
}
.especificacoes-rec {
border-left: 2.5px solid #1E1E1E;
padding: 1rem;
}
/* Infos */
.right {
right: 0;
height: fit-content;
}
.container-fluid h3 {
border-bottom: 5px solid #1E1E1E;
font-size: 3rem;
font-weight: bold;
text-decoration: underline;
text-transform: uppercase;
}
.jogos {
align-items: center;
padding: 0;
}
.jogo {
width: auto;
}
.jogo img {
height: auto;
width: auto;
position: relative;
}
.jogo p {
align-items: center;
background-color: #A5C400;
border-radius: .5rem;
color: #1E1E1E;
display: flex;
height: 3rem;
justify-content: center;
margin-bottom: 0;
margin-left: auto;
margin-top: -3rem;
width: 3rem;
z-index: 1;
}
.infos {
border-radius: 5px;
padding: 1rem;
}
.infos p {
font-size: 1.5rem;
margin-bottom: 0;
margin-left: .5rem;
margin-right: .5rem;
}
.infos img {
height: 2rem;
margin-left: .5rem;
margin-right: .5rem;
width: 2rem;
}
/* Footer */
#footer-links-container {
border-bottom: 1px solid #FFC85D;
}
#footer .footer-column {
align-items: center;
flex-direction: column;
justify-content: center;
padding: 2rem;
text-align: center;
}
#footer-left, #footer-center, #footer-right {
border-top: 1px solid #FFC85D;
}
#footer-center {
border-left: 1px solid #FFC85D;
border-right: 1px solid #FFC85D;
}
#footer .footer-column {
padding: 2rem;
}
#footer-links-container h3 {
font-weight: 900;
margin-top: 25px;
margin-bottom: 25px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
border: 0;
}
#footer-links-container li {
font-size: 1rem;
text-align: center;
}
#footer-links-container a {
color: #FFFFFF;
text-decoration: none;
transition: .5s;
font-size: 1.5rem;
}
#footer-links-container a:hover {
color: #FFC85D;
}
#newsletter-container {
background-color: #1E1E1E;
border-bottom: 1px solid #FFC85D;
padding: 20px;
text-align: center;
}
#news-form {
margin: 15px auto;
max-width: 600px;
}
#news-form i {
font-size: 1.5rem;
}
#news-form .btn {
color: #FFFFFF;
}
#social-container {
margin: 20px auto;
}
#social-container i {
color: #FFFFFF;
cursor: pointer;
font-size: 1.5rem;
margin: 10px;
transition: .5s;
}
#social-container i:hover {
color: #FFC85D;
}
#copy-container {
padding: 30px;
text-align: center;
}
#copy-container p {
font-size: 1.5rem;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 1rem;
}
::-webkit-scrollbar-thumb {
background: #1E1E1E;
border-radius: 4rem;
}
::-webkit-scrollbar-track {
background-color: #FFC85D;
}
/* Responsividade */
@media (max-width: 1300px) {
.logo {
flex-direction: column;
margin-right: .5rem;
}
#logo-img, .navbar-brand {
margin: 0;
}
}<!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=device-width, initial-scale=1.0">
<title>Jogos</title>
<link href="https://fonts.googleapis.com/css2?family=League Spartan:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav id="navbar">
<div >
<div >
<a href="" >
<img src="/img/logo.png" alt="" id="logo-img">
</a>
</div>
<div id="navbar-items">
<form id="search-form">
<i ></i>
<input type="search" placeholder="Digite aqui a sua pesquisa..." aria-label="Search">
<button type="submit">Pesquisar</button>
</form>
<ul >
<li >
<a href="" >Comunidade<i ></i></a>
</li>
<li >
<a href="" >Devs<i ></i></a>
</li>
<li >
<a href="" >Games<i ></i></a>
</li>
<li >
<a href="" ><i ></i></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div >
<div >
<h1 >Enter the Gungeon</h1>
<div >
<div id="carousel" data-bs-ride="carousel">
<div >
<button type="button" data-bs-target="#carousel" data-bs-slide-to="0" aria-current="true" aria-label="slide 1"></button>
<button type="button" data-bs-target="#carousel" data-bs-slide-to="1" aria-current="true" aria-label="slide 2"></button>
<button type="button" data-bs-target="#carousel" data-bs-slide-to="2" aria-current="true" aria-label="slide 3"></button>
<button type="button" data-bs-target="#carousel" data-bs-slide-to="3" aria-current="true" aria-label="slide 4"></button>
<button type="button" data-bs-target="#carousel" data-bs-slide-to="4" aria-current="true" aria-label="slide 5"></button>
<button type="button" data-bs-target="#carousel" data-bs-slide-to="5" aria-current="true" aria-label="slide 6"></button>
</div>
<div >
<div >
<video src="/img/slider1.webm" type="video/webm" alt="" autoplay muted controls></video>
</div>
<div >
<img src="/img/slider2.png" alt="" >
</div>
<div >
<img src="/img/slider3.png" alt="" >
</div>
<div >
<img src="/img/slider4.png" alt="" >
</div>
<div >
<img src="/img/slider5.png" alt="" >
</div>
<div >
<img src="/img/slider6.png" alt="" >
</div>
</div>
<button type="button" data-bs-target="#carousel" data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#carousel" data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
</div>
<div >
<div >
<h2>Sobre esse jogo</h2>
<p>Enter the Gungeon é uma aventura em um labirinto com armas de fogo, na qual um bando de desajustados arrependidos terá que atirar, saquear, se esquivar e virar mesas, em busca da absolvição pessoal, chegando ao lendário tesouro final do Balabirinto: a arma que mata o passado.</p>
</div>
<div id="especificacoes">
<h3>Especificações</h3>
<input type="radio" name="slider" checked id="windows">
<input type="radio" name="slider" id="linux">
<input type="radio" name="slider" id="macos">
<nav >
<label for="windows" ><img src="/img/plataforma1.png" alt="">Windows</label>
<label for="linux" ><img src="/img/plataforma2.png" alt="">Linux</label>
<label for="macos" ><img src="/img/plataforma3.png" alt="">MacOS</label>
<div ></div>
</nav>
<section>
<div >
<ul >
<li >
<p>Mínimos:</p>
<p><span>SO:</span> Windows 7 ou posterior</p>
<p><span>Processador:</span> Intel Core 2 Duo E6320 (2*1866) ou equivalente</p>
<p><span>Memória:</span> 2GB de RAM</p>
<p><span>Placa de vídeo:</span> GeForce 7600 GS (512 MB) ou equivalente</p>
<p><span>Armazenamento:</span> 2GB de espaço disponível</p>
</li>
<li >
<p>Recomendados:</p>
<p><span>SO:</span> Windows 7 ou posterior</p>
<p><span>Processador:</span> Intel Core 2 Duo E6320 (2*1866) ou equivalente</p>
<p><span>Memória:</span> 2GB de RAM</p>
<p><span>Placa de vídeo:</span> GeForce 7600 GS (512 MB) ou equivalente</p>
<p><span>Armazenamento:</span> 2GB de espaço disponível</p>
</li>
</ul>
</div>
<div >
<ul >
<li >
<p>Mínimos:</p>
<p><span>SO:</span> Ubuntu 12.04 ou posterior</p>
<p><span>Processador:</span> Intel Core 2 Duo E6320 (2*1866) ou equivalente</p>
<p><span>Memória:</span> 2GB de RAM</p>
<p><span>Placa de vídeo:</span> GeForce 7600 GS (512 MB) ou equivalente</p>
<p><span>Armazenamento:</span> 2GB de espaço disponível</p>
</li>
<li >
<p>Recomendados:</p>
<p><span>SO:</span> Ubuntu 12.04 ou posterior</p>
<p><span>Processador:</span> Intel Core 2 Duo E6320 (2*1866) ou equivalente</p>
<p><span>Memória:</span> 2GB de RAM</p>
<p><span>Placa de vídeo:</span> GeForce 7600 GS (512 MB) ou equivalente</p>
<p><span>Armazenamento:</span> 2GB de espaço disponível</p>
</li>
</ul>
</div>
<div >
<ul >
<li >
<p>Mínimos:</p>
<p><span>SO:</span> OS 10.6 ou posterior</p>
<p><span>Memória:</span> 2GB de RAM</p>
<p><span>Armazenamento:</span> 2GB de espaço disponível</p>
</li>
<li >
<p>Recomendados:</p>
<p><span>SO:</span> OS 10.6 ou posterior</p>
<p><span>Memória:</span> 2GB de RAM</p>
<p><span>Armazenamento:</span> 2GB de espaço disponível</p>
</li>
</ul>
</div>
</section>
</div>
</div>
</div>
<! -- Container -->
<div >
<div >
<div >
<div >
<img src="/img/jogo.jpg" alt="" >
<p>7 </p>
</div>
</div>
<div ><p>Desenvolvedor</p><p>Dogge Roll</p></div>
<div ><p>Destribuidora</p><p>Devolver Digital</p></div>
<div ><p>Data de Lançamento</p><p>05/Abr./2016</p></div>
<div >
<p>Plataformas</p>
<div>
<p>
<img src="/img/plataforma1.png" alt=""><img src="/img/plataforma2.png" alt=""><img src="/img/plataforma3.png" alt="">
</p>
</div>
</div>
<div >
<button >Jogar</button>
</div>
</div>
</div>
</div>
</main>
<footer>
<div id="footer-links-container">
<div >
<div id="footer-left">
<h3>Rmax</h3>
<ul >
<li ><a href="">Blog</a></li>
<li ><a href="">Diretizes do Site</a></li>
<li ><a href="">Sobre Nós</a></li>
</ul>
</div>
<div id="footer-center">
<h3>Informações</h3>
<ul >
<li ><a href="">Politíca de Cookies</a></li>
<li ><a href="">Politíca de Privacidade</a></li>
<li ><a href="">Termos e Condições</a></li>
</ul>
</div>
<div id="footer-right">
<h3>Para desenvolvedores</h3>
<ul >
<li ><a href="">Ajude Desenvolvedores</a></li>
<li ><a href="">APIs de Games</a></li>
<li ><a href="">Programa de Parceria</a></li>
</ul>
</div>
</div>
</div>
<div id="newsletter-container">
<div >
<div >
<p>Se inscreva na nossa Newletter:</p>
<form id="news-form">
<i ></i>
<input type="email" placeholder="Insira o seu E-mail">
<button type="submit">Enviar</button>
</form>
</div>
</div>
<div id="social-container">
<i ></i>
<i ></i>
<i ></i>
</div>
</div>
<div id="copy-container">
<p>Copyright © 2022 | Rmax. Todos os direitos reservados</p>
</div>
</footer>
</body>
</html>I left a comment where the container's HTML starts, and the CSS of the container is in the part of /* Infos */
Z-index works but it gets a little weird 
it would be perfect if the container arrived at the footer and stopped moving, I think it could be done with JS but I have no idea how
CodePudding user response：
We will first stick the container using:
.target-container {
position: sticky;
//This is the offset from the top of the screen. Change it accordingly.
top: 2rem;
}
Note that:
html, body {
overflow-x: hidden;
}
will prevent position: sticky from working.
CodePudding user response：
If you want your sticky menu hides under your footer (not overlapping it) use this code for your footer
{
position: relative;
z-index: 1;
background: #fff;
}