How to set floating button borders in javascript?

Question

JavaScript

I wrote a script that does not allow the floating button to go above the area where the script is used, when scrolling down, the button climbs to the very bottom of the site, how can I make it stop at the end of the block where my script is used?

<script type="text/javascript">
    $(document).ready(function(){
     $('.spoiler-title').click(function(){
      $(this).parent().children('.spoiler-body').slideToggle();
      return false;
     });
     $('.spoiler-wrapper .spoiler-hd').on('click', function(event){
      $(this).parents('.spoiler-wrapper').find('.spoiler-body').hide("slow");
      return false;
    });
     $(function(){
        var offset = $('.spoiler-hd').offset();
        var max = offset.top + $(".spoiler-hd").parent().height();
        var topPadding = 45;
        $(window).scroll(function() {
          if ($(window).scrollTop() > offset.top && $(window).scrollTop() < max) {
        $(".spoiler-hd").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
           return old.apply( this, arguments );
          }else{
        $(".spoiler-hd").stop().animate({marginTop: 300});
         return old.apply( this, arguments );
        };
      });
    });
  });
  </script>

Answer 1

As a variant of .parent().
It will be something like this:

<script type="text/javascript">
  $(function() {
    var offset = $(".spoiler-hd").offset();
    var max = offset.top + $(".spoiler-hd").parent().height();
    var topPadding = 45;
    $(window).scroll(function() {
      if ($(window).scrollTop() > offset.top && $(window).scrollTop() < max) {
        $(".spoiler-hd").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
      }else{
        $(".spoiler-hd").stop().animate({marginTop: 300});
      };
    });
  });
    </script>