Get a professional website for $99 per month. One week turnaround.

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:

Change Background Color On Scroll Video:


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

JavaScript Code:

    $(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).
    // 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'));


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