How can I make my fixed footer fade or decrease opacity on scroll?

Site URL: https://www.venuswtlau.com/

I insert custom CSS into my website to create a sticky footer, but I would love for the entire footer (or just the background colour) to fade or decrease opacity when you scroll down so that it doesn't cover content. 

I only want it to be at full opacity on the landing screen and when users reach the bottom of the page.

Thanks in advance 🙂

Hopefully this is close to the effect you are looking for.

The following requires the business plan or above.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Settings > Advanced > Code Injection > FOOTER.

<!--

  begin hide footer for majority of scroll range
  
  Version      : 0.1d0
  
  SS Version   : 7.1
  
  Dependancies : jQuery
                 
                 scroll effect base
  
  By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    #footer-sections {
    
      --max-height : 100%;
      
      max-height : var( --max-height );
      
      -webkit-transition : max-height 0.5s;
      -o-transition : max-height 0.5s;
      transition : max-height 0.5s;
      
      }
      
    </style>
    
  <script>
  
    const easingFunction = 'linear';
    
    const invertScale = false;
    
    const $footerSections = $( '#footer-sections' );
    
    const scrollEffect = ( ratio ) => {
    
      if ( ratio > 0.0002 && ratio < 0.99 ) {
      
        ratio = 0;
        
        } else {
        
          ratio = '100%';
          
          }
          
      $footerSections.css ( '--max-height', ratio );
      
      }
      
    </script>
    
  <!-- end hide footer for majority of scroll range -->
  
<!-- do not change anything below, there be the borg here -->

<!--

  begin scroll effect base
  
  Version      : 0.1d0
  
  SS Versions  : 7.0, 7.1
  
  Dependancies : jQuery
                 
                 user defined constants named...
                 
                   easingFunction with a value of linear, inCircle,
                   inOutQuadratic, or outCircle
                   
                   invertScale with a value of false or true
                   
                 user defined function named scrollEffect
                 
  By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  no user serviceable parts below
  
  -->
  
  <script>
  
    $( ( ) => {
    
      const calculateRatio = ( n, whole, easingFunction = 'linear',
      
        invertScale = false ) => {
        
        let ratio = n / whole;  // 0 to 1
        
        switch ( easingFunction ) {
        
          case 'inCircle' :
          
            // < https://easings.net/#easeInCirc >
            
            ratio = 1 - Math.sqrt ( 1 - Math.pow ( ratio, 2 ) );
            
            break;
            
          case 'inOutQuadratic' :
          
            // < https://easings.net/#easeInOutQuad >
            
            ratio = ratio < 0.5 ? 2 * ratio * ratio :
            
              1 - Math.pow ( -2 * ratio + 2, 2 ) / 2;
              
            break;
            
          case 'outCircle' :
          
            // < https://easings.net/#easeOutCirc >
            
            ratio = Math.sqrt ( 1 - Math.pow ( ratio - 1, 2 ) );
            
            break;
            
          }
          
        if ( invertScale ) ratio = 1 - ratio; // 1 to 0
        
        return ratio;
        
        } // end calculateRatio
        
      let maxScrollTop;
      
      $( window )
      
        .resize ( function ( ) {
        
          maxScrollTop = $( document ).height ( ) - $( window ).height ( );
          
          } )
          
        .resize ( )
        
        .scroll ( function ( ) {
        
          const ratio = calculateRatio ( $( window ).scrollTop ( ),
          
            maxScrollTop, easingFunction, invertScale );
            
          scrollEffect ( ratio );
          
          } );
          
      } );
      
    </script>
    
  <!-- end scroll effect base -->

Let us know how it goes.

Hi @creedon

Thanks for sharing!

Unfortunately I don’t have a business plan so I can only do Custom CSS (ideally) or insert code blocks.  

On 5/10/2021 at 5:49 AM, venuswtlau said:

Hi @creedon

Thanks for sharing!

Unfortunately I don’t have a business plan so I can only do Custom CSS (ideally) or insert code blocks.  

With Personal Plan: Edit your Site Footer >> Add a Code Block >> Add @creedon code

1 hour ago, tuanphan said:

With Personal Plan: Edit your Site Footer >> Add a Code Block >> Add @creedon code

@tuanphan I'm currently getting this error message when I try to put it in the code block:

On 5/12/2021 at 11:24 AM, venuswtlau said:

@tuanphan I'm currently getting this error message when I try to put it in the code block:

ah sorry, add a Markdown Block ❣️

On 5/13/2021 at 6:09 PM, tuanphan said:

ah sorry, add a Markdown Block ❣️

Hi Tuan,

I seem to still be getting the same error message with the Markdown Block as well. Am I inputting the code incorrectly? 

Thanks 🙂

On 5/17/2021 at 3:26 PM, venuswtlau said:

Hi Tuan,

I seem to still be getting the same error message with the Markdown Block as well. Am I inputting the code incorrectly? 

Thanks 🙂

Can you take a screenshot of error message?