Scroll

gistfile1.txt

handleScroll() {
       let anchor = 120;
       let value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
       let tensor = (1/(value/anchor))*7 -  1.8 * ((value/anchor) -  1);
       let point = value > anchor ? ( tensor > 0 ? tensor : 0 ):  7;

       if (this.scrollIcon !== null) {
          this.scrollIcon.setAttribute('points', '0 1,0.5 1,0.67 ' + point/87.5 + ',1 0,0 0');
          }
       if (this.Affix !== null) {
          this.Affix.style.webkitClipPath = "polygon(65%" + point + "%, 50% 100%, 0px 100%, 0px 0px, 100% 0px)";
          this.Affix.style.clipPath = "polygon(65%" + point + "%, 50% 100%, 0px 100%, 0px 0px, 100% 0px)";
          } 
}

            
<svg xmlns="http://www.w3.org/2000/svg"   width="0" height="0">
                <clipPath  pointerEvents="none" id="ClipAffix" clipPathUnits="objectBoundingBox">
                  <polygon ref={(ref) => this.scrollIcon = ref} id="clipmask" points="0 1,0.5 1,0.67 0.08,1 0,0 0">
                  </polygon>
                </clipPath>
              </svg>