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;}
