Sticky Navbar lifting my footer when i touch the dropdown button when i am at the bottom of my page

Question

So the thing is im working on a class website and im trying to make it look cool by adding various stuff to it. So the thing is that, i think some properties interrupt each other so whenever i use the dropdown toggle at any moment during the scroll, everything is fine, but when im at the footer and the resolution is lower than the original, the footer goes up and it goes back to the last section. Any tip on how to fix it or how to improve the overall order of my html? Thank you in advance! Html, css and js involved in order:

    



  
  

  

  
  
  
  
  
  SneakerReport


  

  
    SneakerReport
  
    

      
        Inicio (current)
      
      
        Historia
      
      
        Inscribete
      
      
        
          Marcas
        
        
          Supreme
          Palace
        
      
    
    
  
  

  


  
      
          
          
          
      
      
          
              
              
                  El inicio de algo grande

              
          
          
              
              
                  Una nueva experiencia
                  Redescubre la moda
              
          
          
              
              
                  Una accesibilidad unica
                  
              
          
      



  
    SneakerReport   
    
         17:19:50
      
    




  
    
      
        
          Descubre la historia
        
          Conocerás la historia tras cada par, prenda o accesorio que alguna vez hayas podido ver, soñar o diseñar. 
      
      
        
      
    
  
  
    
      
        
      
      
        
          Compras guiadas
        
          Te traemos los mejores secretos para que compres lo que compres, siempre gane tu outfit y tu bolsillo. 

      
    
  
  
    
      
        
          Sorteos mensuales
        
          Si te registras en nuestro boletin, pasaras a entrar en el sorteo mensual de una caja misteriosa. 
      
      
        
      
    
  

  
    

      
      SneakerReport nace como una solucion para que gente de todas las edades tenga una posibilidad
        de acceder a moda limitada sin pagar reventa.
        
           
           
           
        
      
      
        
          Paginas en las que tenemos soporte
          
             Supreme 
             Palace 
          
        
        
          Otras secciones
          
             Historia 
             Inscribete 
          
        
        
      

      
        Todos los derechos reservados a ©Gonzalo Canteli 2020 
      
      
        
      

        Utilizamos cookies propias y de terceros para mejorar la experiencia del usuario a través de su navegación. Si continúas navegando aceptas su uso. Política de cookies.

Css:

html{
  scroll-behavior: smooth;

}

.main-text {
    position: absolute;
    top: 50px;
    width: 96.66666666666666%;
    color: #FFF;
}
.cookie-container{
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: #2f3640;
  color:#f5f6fa;
  padding: 15px 32px;
  box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.151);

  transition: 400ms;
}
.cookie-container a {
  color: #f5f6fa;
}
.cookie-container.active {
  bottom: 0;
}
.cookie-btn {
  background: #e84118;
  border:0;
  color:#f5f6fa;
  padding: 12px 48px;
  font-size: 18px;
  margin-bottom: 16px;
  border-radius: 8px;
  cursor:pointer;
}

.marcos{
  border: 3px;
  border-color: white;
  border-style: solid;
}
.quitarpad{

    padding-right: 0px !important;
    padding-left: 0px !important;
}
#pagina{
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;


  margin: 0px;
}
#pagina p{
  font-family: 'Roboto', sans-serif;
}
#gradiente{




  background: rgb(167, 255, 55);
background: -moz-linear-gradient(90deg, rgb(167, 255, 55) 0%, rgb(255, 246, 232) 55%);
background: -webkit-linear-gradient(90deg, rgb(167, 255, 55) 0%, rgb(255, 246, 232) 55%);
background: -o-linear-gradient(90deg, rgb(167, 255, 55) 0%, rgb(255, 246, 232) 55%);
background: -ms-linear-gradient(90deg, rgb(167, 255, 55) 0%, rgb(255, 246, 232) 55%);
background: linear-gradient(180deg, rgb(167, 255, 55) 0%, rgb(255, 246, 232) 55%);


  opacity: 0.9;
}


.contenedor h1{

  text-align: center;
  padding-left: 20px;
  font-family: "Oswald script=latin rev=1", sans-serif;
}
h3{
  text-shadow: 2px -2px 0px rgba(147, 150, 150, 1);
}
.container{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-nav > li{
  padding-left:20px;
  padding-right:20px;
}
section{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  height: 100vh;
  position:sticky;
  display:flex;
  justify-content: center;
  align-items: center;

}
section .container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  height:95vh;
  padding 3rem calc((100vw - 1300px)/2);
}
section .text {
  color:#fff;
}
section .image{
  width: 100%;
  height: 100%;
  max-width: 750px;
  max-height:400px;
}
.column-right {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}
.column-left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #000;
  padding: 0rem 2rem;
}
.column-left h1{
  margin-bottom: 3rem;
  font-size: 2rem;
  font-style: italic;
}
.column-left p{
  margin-bottom: 2rem;
  font-size: 2rem;
  line-height: 1.1;
}
.segmento{
  background: #66488f;
}

footer{
  margin: 0;
  position: sticky;
  box-sizing: border-box;
  display: flex;
  color: #fff;
  background-color:  #000033;
  padding: 50px;
  font-size: 14px;
  flex-flow: row wrap;
}
.footer-left img{
  width: 50%;
  max-width: 150px;
  max-height: 60px;
  margin-top: 20px;
  margin-bottom: 20px;

}

.socials{
  text-align: center;
}
.footer > *{
  flex: 1 100%;
}
.footer-left{
  margin-right: 1.25em;
  margin-bottom: 2em;
}
.footer-right{
  display: flex;
  flex-flow: row wrap;
}
.footer-right > *{
  flex: 1 50%;
  margin-right: 1.25em;
}
.box a{
  color:#999;
}
.footer-bottom{
  text-align: center;
  color: #999;
  padding-top: 50px;
}
.footer-left p{
  padding-right: 20%;
  color: #999;
}
.socials a{
  background: #364a62;
  width: 40px;
  height: 40px;
  display: inline-block;
  margin-right: 10px;
  padding: 10px;
}



.footer h2{
  font-weight: 600;
  font-size: 17px;
}
.footer ul{
  list-style:none;
  padding-left: 0;
}
.footer li{
  line-height: 2em;
}
.footer a{
  text-decoration: none;
}

.dos{
  background: #f5e2c0;
}
.tres{
  background: #ff8543;
}
.reloj{
  text-align: center;
  background: none;
  height: 120px;
  width:500px;
  line-height: 200px;

  padding: 0 700px;


}
.reloj .display{
  font-size: 30px;
  color: white;
  letter-spacing: 5px;
  font-family: 'Lato', sans-serif;
}

nav{
  background-color: #000033;

  opacity:0.95;

}
@media screen and (min-width: 600px){
  .footer-right > *{
    flex:1;
  }
  .footer-left{
    flex:1 0px;
  }
  .footer-right{
    flex:2 0px;
  }
}
@media (max-width: 600px){
  .footer{
    padding: 15px;
  }
}
.btninicio{
  position:fixed;
  width:50px;
  height:50px;
  background: #6F1E51;
  bottom: 40px;
  right: 50px;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size: 22px;
}

js:

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.segmento').forEach(section => {
  ScrollTrigger.create({
    trigger: section,
    start: 'top top',
    pin: true,
    pinSpacing: false
  });
});
setInterval(function(){
const reloj = document.querySelector(".display");
let time = new Date();
let sec = time.getSeconds();
let min = time.getMinutes();
let hr = time.getHours();
if (sec < 10){
  sec= '0' + sec;
}
if (min < 10){
  min= '0' + min;
}
if (hr < 10){
  hr= '0' + hr;
}
reloj.textContent = hr + ':' + min + ':' + sec;
});

user_8134014 · Answer

In your footer style you have to add bottom: 0; to keep it sticky at the bottom of the page try the snippet

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.segmento').forEach(section => {
  ScrollTrigger.create({
    trigger: section,
    start: 'top top',
    pin: true,
    pinSpacing: false
  });
});
setInterval(function(){
const reloj = document.querySelector(".display");
let time = new Date();
let sec = time.getSeconds();
let min = time.getMinutes();
let hr = time.getHours();
if (sec < 10){
  sec= '0' + sec;
}
if (min < 10){
  min= '0' + min;
}
if (hr < 10){
  hr= '0' + hr;
}
reloj.textContent = hr + ':' + min + ':' + sec;
});

html{
  scroll-behavior: smooth;

}

.main-text {
    position: absolute;
    top: 50px;
    width: 96.66666666666666%;
    color: #FFF;
}
.cookie-container{
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: #2f3640;
  color:#f5f6fa;
  padding: 15px 32px;
  box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.151);

  transition: 400ms;
}
.cookie-container a {
  color: #f5f6fa;
}
.cookie-container.active {
  bottom: 0;
}
.cookie-btn {
  background: #e84118;
  border:0;
  color:#f5f6fa;
  padding: 12px 48px;
  font-size: 18px;
  margin-bottom: 16px;
  border-radius: 8px;
  cursor:pointer;
}

.marcos{
  border: 3px;
  border-color: white;
  border-style: solid;
}
.quitarpad{

    padding-right: 0px !important;
    padding-left: 0px !important;
}
#pagina{
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;

  margin: 0px;
}
#pagina p{
  font-family: 'Roboto', sans-serif;
}
#gradiente{




  background: rgb(167, 255, 55);
background: -moz-linear-gradient(90deg, rgb(167, 255, 55) 0%, rgb(255, 246, 232) 55%);
background: -webkit-linear-gradient(90deg, rgb(167, 255, 55) 0%, rgb(255, 246, 232) 55%);
background: -o-linear-gradient(90deg, rgb(167, 255, 55) 0%, rgb(255, 246, 232) 55%);
background: -ms-linear-gradient(90deg, rgb(167, 255, 55) 0%, rgb(255, 246, 232) 55%);
background: linear-gradient(180deg, rgb(167, 255, 55) 0%, rgb(255, 246, 232) 55%);


  opacity: 0.9;
}


.contenedor h1{

  text-align: center;
  padding-left: 20px;
  font-family: "Oswald script=latin rev=1", sans-serif;
}
h3{
  text-shadow: 2px -2px 0px rgba(147, 150, 150, 1);
}
.container{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-nav > li{
  padding-left:20px;
  padding-right:20px;
}
section{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  height: 100vh;
  position:sticky;
  display:flex;
  justify-content: center;
  align-items: center;

}
section .container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  height:95vh;
  padding 3rem calc((100vw - 1300px)/2);
}
section .text {
  color:#fff;
}
section .image{
  width: 100%;
  height: 100%;
  max-width: 750px;
  max-height:400px;
}
.column-right {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}
.column-left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #000;
  padding: 0rem 2rem;
}
.column-left h1{
  margin-bottom: 3rem;
  font-size: 2rem;
  font-style: italic;
}
.column-left p{
  margin-bottom: 2rem;
  font-size: 2rem;
  line-height: 1.1;
}
.segmento{
  background: #66488f;
}

footer{
  margin: 0;
  bottom:0;
  position: sticky;
  box-sizing: border-box;
  display: flex;
  color: #fff;
  background-color:  #000033;
  padding: 50px;
  font-size: 14px;
  flex-flow: row wrap;
}
.footer-left img{
  width: 50%;
  max-width: 150px;
  max-height: 60px;
  margin-top: 20px;
  margin-bottom: 20px;

}

.socials{
  text-align: center;
}
.footer > *{
  flex: 1 100%;
}
.footer-left{
  margin-right: 1.25em;
  margin-bottom: 2em;
}
.footer-right{
  display: flex;
  flex-flow: row wrap;
}
.footer-right > *{
  flex: 1 50%;
  margin-right: 1.25em;
}
.box a{
  color:#999;
}
.footer-bottom{
  text-align: center;
  color: #999;
  padding-top: 50px;
}
.footer-left p{
  padding-right: 20%;
  color: #999;
}
.socials a{
  background: #364a62;
  width: 40px;
  height: 40px;
  display: inline-block;
  margin-right: 10px;
  padding: 10px;
}



.footer h2{
  font-weight: 600;
  font-size: 17px;
}
.footer ul{
  list-style:none;
  padding-left: 0;
}
.footer li{
  line-height: 2em;
}
.footer a{
  text-decoration: none;
}

.dos{
  background: #f5e2c0;
}
.tres{
  background: #ff8543;
}
.reloj{
  text-align: center;
  background: none;
  height: 120px;
  width:500px;
  line-height: 200px;

  padding: 0 700px;


}
.reloj .display{
  font-size: 30px;
  color: white;
  letter-spacing: 5px;
  font-family: 'Lato', sans-serif;
}

nav{
  background-color: #000033;

  opacity:0.95;

}
@media screen and (min-width: 600px){
  .footer-right > *{
    flex:1;
  }
  .footer-left{
    flex:1 0px;
  }
  .footer-right{
    flex:2 0px;
  }
}
@media (max-width: 600px){
  .footer{
    padding: 15px;
  }
}
.btninicio{
  position:fixed;
  width:50px;
  height:50px;
  background: #6F1E51;
  bottom: 40px;
  right: 50px;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size: 22px;
}

  
  
  
  
  

  

  
    SneakerReport
  
    

      
        Inicio (current)
      
      
        Historia
      
      
        Inscribete
      
      
        
          Marcas
        
        
          Supreme
          Palace
        
      
    
    
  
  

  


  
      
          
          
          
      
      
          
              
              
                  El inicio de algo grande

              
          
          
              
              
                  Una nueva experiencia
                  Redescubre la moda
              
          
          
              
              
                  Una accesibilidad unica
                  
              
          
      



  
    SneakerReport   
    
         17:19:50
      
    




  
    
      
        
          Descubre la historia
        
          Conocerás la historia tras cada par, prenda o accesorio que alguna vez hayas podido ver, soñar o diseñar. 
      
      
        
      
    
  
  
    
      
        
      
      
        
          Compras guiadas
        
          Te traemos los mejores secretos para que compres lo que compres, siempre gane tu outfit y tu bolsillo. 

      
    
  
  
    
      
        
          Sorteos mensuales
        
          Si te registras en nuestro boletin, pasaras a entrar en el sorteo mensual de una caja misteriosa. 
      
      
        
      
    
  

  
    

      
      SneakerReport nace como una solucion para que gente de todas las edades tenga una posibilidad
        de acceder a moda limitada sin pagar reventa.
        
           
           
           
        
      
      
        
          Paginas en las que tenemos soporte
          
             Supreme 
             Palace 
          
        
        
          Otras secciones
          
             Historia 
             Inscribete 
          
        
        
      

      
        Todos los derechos reservados a ©Gonzalo Canteli 2020 
      
      
        
      

        Utilizamos cookies propias y de terceros para mejorar la experiencia del usuario a través de su navegación. Si continúas navegando aceptas su uso. Política de cookies.

Sticky Navbar lifting my footer when i touch the dropdown button when i am at the bottom of my page

1 Answers