JQuery - Перестановка ссылки при изменении размеров окна

Question

Когда экран изменяется я помещаю суб-нав ссылки в #MoreList "Еще Ульяновой

Это работает хорошо, но когда окно вновь расширило ссылку находятся внутри #MoreList, и я пытаюсь заставить их перейти на их исходные позиции, когда есть достаточно свободного места

Я пробовал несколько вещей, но очень плохо борюсь и просто задаюсь вопросом, знает ли кто-нибудь о способе Я мог бы добиться этого?

https://jsfiddle.net/yvw93k1n/

function SubNav() { 

    'use strict'; 

    var $elements = { 
      body: $('body'), 
      header: $('header'), 
      subMenu: $('#SubNav'), 
      subList: $('.sub-nav__list'), 
      subItem: $('.sub-nav__list-item'), 
      subTitle: $('.sub-nav__section-title'), 
      moreList: $('#MoreList'), 
      moreItem: $('#MoreItem'), 

      exclude: $('.js-nav-exclude'), 

      hashLink: $('a[href*=#]:not([href=#])') 
     }, 

     $variables = { 
      totalWidth: 0, 
      navWidth: 0, 
      freeSpace: 0, 
      moreItem: null, 
      reqSpace: null, 
      currentOffset: 0, 
      scrollby: 0, 
      bodyWidth: 0 
     }, 

     overflow = true, 
     moveItem = null, 
     freeSpace = 0, 
     firstItem = 0, 
     target = null; 

    // Move links into more list 
    function removeLink(){ 
     moveItem = $elements.moreItem.prev('li'); 
     $elements.moreItem.addClass('is-visible'); 
     $elements.moreList.prepend(moveItem); 
    } 

    // Check current free space in sub nav 
    function checkSpace() { 
     if ($elements.subTitle.length) { 
      freeSpace = $elements.subTitle.outerWidth(true); 
     } 
     freeSpace = $elements.subMenu.width() - (freeSpace + $elements.subList.outerWidth(true)); 

     firstItem = $elements.moreList.first('li').outerWidth(true); 

     if (freeSpace > firstItem) { 
      moveItem = $elements.moreList.first('li'); 
     } 
    } 

    // Get current overflow 
    function getOverflow() { 
     if ($elements.subMenu.get(0).scrollHeight > $elements.subMenu.get(0).offsetHeight || $elements.subMenu.get(0).scrollWidth > $elements.subMenu.get(0).offsetWidth) { 
      removeLink(); 
     } else { 
      overflow = false; 
      checkSpace(); 
     } 
     return overflow; 
    } 

    // Check for overflow and move links 
    function checkWidth() { 
     overflow = true; 
     while (overflow === true) { 
      getOverflow(); 
     } 
    } 

    // Smooth scrolling functionality 
    function smoothScroll() { 
     $elements.hashLink.click(function() { 

      if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) { 

       // Get target 
       target = $(this.hash); 
       target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 

       if (target.length) { 

        // Disable pointer events to stop mega menu from displaying 
        $elements.header.css('pointer-events', 'none'); 

        // Scroll to target 
        $elements.body.animate({ 
         scrollTop: target.offset().top - 96 
        }, 1000); 

        // Reset hidden header 
        setTimeout(function() { 
         $elements.body.addClass('hide-offscreen'); 
        }, 1000); 

        // Re-enable pointer events 
        setTimeout(function() { 
         $elements.header.css('pointer-events', 'all'); 
        }, 1200); 
        return false; 
       } 
      } 
     }); 
    } 

    this.init = function() { 
     smoothScroll(); 
     if ($elements.subMenu.length) { 
      $(window).load(function() { 
       checkWidth(); 
      }); 
      $(window).resize(function() { 
       checkWidth(); 
      }); 
     } 
    }; 

} 

var subNav = new SubNav(); 
subNav.init(); 

Answer 1

это выглядит, как вы проверяете для

if (freeSpace > firstItem) { 
      moveItem = $elements.moreList.first('li'); 
     } 

так почему бы не проверить, если

if (freeSpace < firstItem) { 
     moveItem = yourDesiredElement 
    }