Two menu effects in one JQuery

Question

for several days I have been trying to combine these 2 effects so that they work on the same menu but without effective. Do any of you have any idea what it should look like, should it work properly and not have many loops at the same time? Of course, the code, as each effect should work, is provided in the link. Thank you for your help :)

Preview how each effect works: https://jsfiddle.net/vw6zs8kp/

JavaScript Code:

;(function($){"use strict";
var line = $('#sf-arrows, #line'), item_default = $('.menu-item.item-active'), item_width = $('.item-active').width(), position_left = $('.item-active').position().left;
$('.menu-item').on("classChange", function(){
    item_default = $('.menu-item.item-active'), item_width = $('.item-active').width(), position_left = $('.item-active').position().left;
});
line.css({left: position_left, width: item_width});
let items = $('.sf-menu > .menu-wrapper > .nav-menu').children('li');
items.each(function(){
    var item = $(this), menu_item = item.children('a.js-scroll-trigger[href*="#"]:not([href="#"])');
    $(menu_item).on("click", function(){
        if(location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname){
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if(target.length && $(item).is(':visible')){
                $('html, body').animate({scrollTop: (target.offset().top - 56)}, 1000, "easeInOutExpo");
                return false;
            }
        }
    });
    $(window).scroll(function(){
        var i = 0;
        menu_item.each(function(index, id){
            if(location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname){
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if(target.length && $(item).is(':visible')){
                    item.removeClassClass('item-active');
                    if(($(window).scrollTop() + 56)>=(target.offset().top - 56) && ($(window).scrollTop() + ($('main > section[id]')[(i+1)].offsetTop - (target.offset().top + target.height())))<=(target.offset().top + target.height() - 56)){
                        item.addClass('item-active');
                        i++;
                    }else{
                        $(id.parentElement).removeClass('item-active');
                    }
                }
            }
        });
    });
    $(this).mouseenter(function(){
        item_width = item.width(), position_left = item.position().left;line.css({left: position_left, width: item_width});
    });
    $(this).mouseleave(function(){
        item_width = item_default.width(), position_left = item_default.position().left;line.css({left: position_left, width: item_width});
    });
});})(jQuery);