Show/Hide Elements Based on Scroll Direction - Elementor & Javascript(JS) or GSAP

(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)

Get Elementor Pro Today –

1 – Elementor Pro

Show/Hide any Element based on scroll direction with Javascript(JS) or GSAP

I have provided two versions, one uses vanilla javascript to achieve this effect and the second one uses GSAP to achieve this effect. You can also choose whether you want to show on scroll down or hide on scroll down, and the same for scroll up.

Version 1 – Show on Scroll UP & Hide on Scroll DOWN (Javascript)

dm-smart-scroller is the CSS class given to element that should be shown on scroll up and hidden on scroll down. If you wish to change the CSS class names, please change them accordingly in the code too.
The below code uses translate property to show/hide elements based on scroll.

				
					<style>
    
    .dm-smart-scroller {
        
        position:fixed;
        top:0;
        left:0;
        transform:translate(0%,0%);
        
    }
    
</style>

<script>
    
const dmSmartScroller= document.querySelector(".dm-smart-scroller");

//Based on scroll-direction show/hide Header

let currentScroll3 = 0;
let isScrollingDown3 = true;


window.addEventListener("scroll", function(){
  
  if (window.pageYOffset > currentScroll3) {
    isScrollingDown3 = true;
    dmSmartScroller.style.transform = 'translate(0%, -100%)';
    
  } else {
    isScrollingDown3 = false;
    dmSmartScroller.style.transform = 'translate(0%, 0%)';
   
  }
  
  currentScroll3 = window.pageYOffset;
  
});
 
</script>

Version 1 – Show on Scroll UP & Hide on Scroll DOWN (GSAP)

dm-smart-scroller is the CSS class given to element that should be shown on scroll up and hidden on scroll down. If you wish to change the CSS class names, please change them accordingly in the code too.
The below code uses translate property (y) to show/hide elements based on scroll.

				
					<style>
    
    .dm-smart-scroller {
        
        position:fixed;
        top:0;
        left:0;
        transform:translate(0%,0%);
        transition: none !important;
        
    }
    
    
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

<script>

//Based on scroll-direction show/hide floating background

let currentScroll3 = 0;
let isScrollingDown3 = true;


window.addEventListener("scroll", function(){
  
  if (window.pageYOffset > currentScroll3) {
    isScrollingDown3 = true;
    
    gsap.to(".dm-smart-scroller", {
        y:'-100%',
        ease: "power1.out"
        
    });
  } else {
    isScrollingDown3 = false;
    gsap.to(".dm-smart-scroller", {
        y:'0%',
        ease: "power1.out"
        
    });
  }
  
  currentScroll3 = window.pageYOffset;
});

</script>

Version 2 – Show on Scroll DOWN & Hide on Scroll UP (Javascript)

dm-smart-scroller2 is the CSS class given to element that should be shown on scroll down and hidden on scroll up. If you wish to change the CSS class names, please change them accordingly in the code too.
The below code uses translate property to show/hide elements based on scroll.

				
					<style>
    
    .dm-smart-scroller2 {
        
        position:fixed;
        bottom:0;
        left:0;
        transform:translate(0%,100%);
        
    }
    
</style>

<script>
    
const dmSmartScroller2 = document.querySelector(".dm-smart-scroller2");

//Based on scroll-direction show/hide Header

let currentScroll2 = 0;
let isScrollingDown2 = true;


window.addEventListener("scroll", function(){
  
  if (window.pageYOffset > currentScroll2) {
    isScrollingDown2 = true;
    dmSmartScroller2.style.transform = 'translate(0%, 0%)';
    
  } else {
    isScrollingDown2 = false;
    dmSmartScroller2.style.transform = 'translate(0%, 100%)';
   
  }
  
  currentScroll2 = window.pageYOffset;
  
});
 
</script>

Version 2 – Show on Scroll DOWN & Hide on Scroll UP (GSAP)

dm-smart-scroller2 is the CSS class given to element that should be shown on scroll down and hidden on scroll up. If you wish to change the CSS class names, please change them accordingly in the code too.
The below code uses translate property (y) to show/hide elements based on scroll.

				
					<style>
    
    .dm-smart-scroller2 {
        
        position:fixed;
        bottom:0;
        left:0;
        transform:translate(0%,100%);
        transition: none !important;
        
    }
    
    
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

<script>

//Based on scroll-direction show/hide floating background

let currentScroll2 = 0;
let isScrollingDown2 = true;


window.addEventListener("scroll", function(){
  
  if (window.pageYOffset > currentScroll2) {
    isScrollingDown2 = true;
    
    gsap.to(".dm-smart-scroller2", {
        y:'0%',
        ease: "power1.out"
        
    });
  } else {
    isScrollingDown2 = false;
    gsap.to(".dm-smart-scroller2", {
        y:'100%',
        ease: "power1.out"
        
    });
  }
  
  currentScroll2 = window.pageYOffset;
});

</script>