JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background: pink;">
		<div id="js-new-title-stuck-1" style="display: block; margin-top:400px;">Moving title</div>
	</div>
	<div style="background: green;">
		<div class="js-new-title-stuck-1" style="display: block; margin-top:400px;">Moving title</div>
	</div>
	<div style="background: blue;">
		<div id="js-new-title-stuck-3" style="display: block; margin-top:400px;">Moving title</div>
	</div>
	<div style="background: red;">
		<div id="js-new-title-stuck-4" style="display: block; margin-top:400px;">Moving title</div>
	</div>

CSS

body{
  
  height: 5000px;
}

JavaScript

Object.prototype.parallax = function(userOptions){
  if(!this.jquery) return false;
  // Default info
  var options = {
    speed: 6,
    direction: "down"
  };
  options = $.extend( options, userOptions );
    
  // Element info
  var element = this;
  var startPoint = element.position().top;
  var endPoint = element.position().top + element.height();
  
  // Scroll info
  var scrollPos = {
    top: $(window).scrollTop(),
    bottom: $(window).scrollTop() + $(window).height()
  };
    
  // first call
  scrolling();
  
  // call on scroll
  $(window).on("scroll", function(){
    scrolling();
  });
  
  function scrolling(){
    scrollPos = {
      top: $(window).scrollTop(),
      bottom: $(window).scrollTop() + $(window).height()
    };
    
    element.css({"transform": "translateY("+(scrollPos.top - startPoint)+"px)"});
    
  }
};

$("#js-new-title-stuck-3").parallax({speed:2});