Sticky Scrolling Tab Effect (Elementor Pro)

Home Elementor Sticky Scrolling Tab Effect (Elementor Pro)

August 8, 2022

In this video, I recreate the cool Sticky Scrolling Tab Effect from the Wave Financial website using Elementor Pro.

Wave Financial:
https://www.waveapps.com/

Change Background Color On Scroll Video:
https://www.youtube.com/watch?v=QE7akMQ2xGk

Timestamps:

  • 0:00 Introduction
  • 2:08 Sticky Scrolling Tab Effect Tutorial

JavaScript Code:

				
					<script>
jQuery(function($){
    $(window).scroll(function() {

  // selectors
  var $window = $(window),
      $body = $('.bodybg'),
      $panel = $('.panel');
      $buttons1 = $('.buttons1');
      $buttons2 = $('.buttons2');
      $buttons3 = $('.buttons3');
      $buttons4 = $('.buttons4');
     

  // Change 33% earlier than scroll position so colour is there when you arrive.
  var scroll = $window.scrollTop() + ($window.height() / 3);

  $panel.each(function () {
    var $this = $(this);

    // if position is within range of this panel.
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
    // wickydesign.com
    // Remember we set the scroll to 33% earlier in scroll var.
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {

      // Remove all classes on body with color-
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });
      $buttons1.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });
       $buttons2.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });
       $buttons3.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });
       $buttons4.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });
      
      

      // Add class of currently active div. Wicky Design
      $body.addClass('color-' + $(this).data('color'));
      $buttons1.addClass('color-' + $(this).data('color'));
      $buttons2.addClass('color-' + $(this).data('color'));
      $buttons3.addClass('color-' + $(this).data('color'));
      $buttons4.addClass('color-' + $(this).data('color'));
    }
  });

}).scroll();
});
</script>
				
			

CSS Code:

				
					.bodybg {transition: background-color 1.2s !important;}
.color-purple {background-color: #e9a9fc;}
.color-blue {background-color: #8dc0d1;}
.color-peach {background-color: #efbca9;}
.color-tan {background-color: #f4dfcd;}

.buttons1,.buttons2,.buttons3,.buttons4 {background-color:transparent;}
.buttons1.color-purple a{background-color: #f9f4f1!important;}
.buttons2.color-blue a{background-color: #f9f4f1!important;}
.buttons3.color-peach a{background-color: #f9f4f1!important;}
.buttons4.color-tan a{background-color: #f9f4f1!important;}
				
			

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

More Free Resources