Calculating element stop on scroll?

Question

css

There is a red triangle-button "up" here: cg91812-wordpress-3.tw1.ru
Task: when scrolling to the footer, the triangle should touch the bottom horizontal. stripes above the footer and stop on it. I know somehow they calculate this matter ..
Please tell me how? Or other options

Answer 1

$(document).on('scroll',function(){
         var stopLine = $('.brdbrd').offset().top;
         var triangle = $('#back-top');
         var triangleCoord = triangle.offset().top + triangle.height();
         if( triangleCoord > stopLine ){
              triangle.css({position:'absolute',top: stopLine });
         } else {
              triangle.css({position:'fixed',top: 'inherit'});
         }
         
   })

did not check

Answer 2

offset top
It appears smoothly when you scroll, look how it's done, maybe this method will work

Answer 3

You need to compare the .offset().top of the stripe and the .offset().top of the triangle. As soon as they become equal (well, or whatever you prefer), stop scrolling.