I have a jquery code which makes an existing element follow the scroll of the user. I want it to stop when reaching a certain element #header-line, but it's not consistent. On some PDPs it scrolls and stops there, on others, it scrolls past the line.

Page: https://www.norli.no/to-pappaer (Code is not activated here)

jQuery

require(['jquery'], function($){
  $(document).ready(function() {

(function($) {
    var element = $('.product-add-form'),
        originalY = element.offset().top;

    var hr = $('#header-line > hr');
        topOfLine = hr.offset().top;

    var topMargin = 250;

    element.css('position', 'relative');

    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();
        var nextPosition = scrollTop - originalY + topMargin;
        var maxPositionAllowed = topOfLine - 1000;

        element.stop(false, false).animate({
          top: scrollTop + 250 < originalY ? 0 : Math.min(nextPosition, maxPositionAllowed )
        }, 0);
    });
})(jQuery);
  });
});