A Pen by Rafa Garcés

Thumbnail
This awesome code was written by rafagarces, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rafagarces ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Rafa Garcés</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="nav-down">HEADER</header>
<main>MAIN</main>
<footer class="footer-down">FOOTER</footer>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/rafagarces/a-pen-by-rafa-garcandxe9s-rGaKBy */
body{margin:0;}
main {
    background-color: lime;
    width:100%;
    height: 1000px;
}


header {
    background: purple;
    color:white;
    width: 100%;
    height: inherit;
    padding: 0.2vw;
}

/*NAVBAR*/

.nav-down{
    transform: translateY(0%);
    transition: 0.4s ease-in-out;
  }
.nav-up {
    transform: translateY(-100%);
    transition: 0.4s ease-in-out;

}

/*FOOTER*/

.full-top {  
    position: fixed;
    bottom: 0;
    transition: bottom 0.4s ease-in-out;   
}

/*FOOTER

footer { 
  height:120px;
  width:100%;
  color:white;
  padding:10px;
}

.full-top {  
    position: fixed;
    bottom: 0;
    
    background:red;
    transition: bottom 0.4s ease-in-out;   
}

.footer-down {
    position: fixed;
    bottom: -100px;
    
    
    background:blue;
    transition: bottom 0.4s ease-in-out;
}

*/

/*Downloaded from https://www.codeseek.co/rafagarces/a-pen-by-rafa-garcandxe9s-rGaKBy */
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

const docH = $(document).height();
const sum = st + $(window).height();
   
    if ((st > lastScrollTop && st > navbarHeight) && docH !== sum) {
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
        $('footer').removeClass('full-top').addClass('footer-down');
    }  else  
        // Scroll Up
    if(sum < docH || docH === sum) {
            $('header').removeClass('nav-up').addClass('nav-down');     
            $('.footer').removeClass('footer-down').addClass('full-top');black');
        }
    lastScrollTop = st;
}

Comments