ターゲティング要素が存在しない場合、スクロールイベントも発生しますか？

Question

私はサブナビゲーションとしてサイドバーを持っていて、ユーザがセクションをスクロールしている間にその中のナビゲーションリンクを強調表示するためにカスタムのjavascriptを添付しています。私はこのJavascriptをメインのjsファイルに含めました。サイドバーはすべてのページに含まれていません。私が知りたいのは、このサイドバーへの添付されたスクロールイベントが、サイドバーが含まれていないサイトで発生した場合、またはこれらのサイトでこのスクリプトが無視されている場合です。

 // waypoint for fixed sidebar 
     $('.tg-desktop__accordionWrapper').waypoint(function (direction) { 
      if (direction === 'down') { 
       $(this.element).addClass('tg-accordion__sidebar--fixed'); 
      } else { 
       $(this.element).removeClass('tg-accordion__sidebar--fixed'); 
      } 
     }); 

     // cache the navigation links 
     var $navigationLinks = $('.tg-accordion__sidebarLink'); 
     // cache (in reversed order) the sections 
     var $sections = $($(".tg-accordion__text").get().reverse()); 

     // map each section id to their corresponding navigation link 
     var sectionIdTonavigationLink = {}; 
     $sections.each(function() { 
      var id = $(this).attr('id'); 
      sectionIdTonavigationLink[id] = $('.tg-accordion__sidebarLink[href=#' + id + ']'); 
     }); 

     // throttle function, enforces a minimum time interval 
     function throttle(fn, interval) { 
      var lastCall, timeoutId; 
      return function() { 
       var now = new Date().getTime(); 
       if (lastCall && now < (lastCall + interval)) { 
        // if we are inside the interval we wait 
        clearTimeout(timeoutId); 
        timeoutId = setTimeout(function() { 
         lastCall = now; 
         fn.call(); 
        }, interval - (now - lastCall)); 
       } else { 
        // otherwise, we directly call the function 
        lastCall = now; 
        fn.call(); 
       } 
      }; 
     } 

     function highlightNavigation() { 
      // get the current vertical position of the scroll bar 
      var scrollPosition = $(window).scrollTop(); 

      // iterate the sections 
      $sections.each(function() { 
       var currentSection = $(this); 
       // get the position of the section 
       var sectionTop = currentSection.offset().top; 

       // if the user has scrolled over the top of the section 
       if (scrollPosition >= sectionTop) { 
        // get the section id 
        var id = currentSection.attr('id'); 
        // get the corresponding navigation link 
        var $navigationLink = sectionIdTonavigationLink[id]; 
        // if the link is not active 
        if (!$navigationLink.hasClass('active')) { 
         // remove .active class from all the links 
         $navigationLinks.removeClass('active'); 
         // add .active class to the current link 
         $navigationLink.addClass('active'); 
        } 
        // we have found our section, so we return false to exit the each loop 
        return false; 
       } 
      }); 
     } 

     $(window).scroll(throttle(highlightNavigation,100)); 

Answer 1

スクロールハンドラは無条件に添付されています。したがって、そのハンドラはサイドバーがなくても起動します。そして、すべての確率で、jQueryの厳しい性質のために、何も投げません。サイドバーがなければ、望ましい副作用は起こりません。

サイドバーが存在しないときにスクロールハンドラをアタッチするのは非常に簡単です。実際、このようなページ（または、好きな場合は「サイト」）上で問題のコードは必要ないと思われます。このような

何かが、私は期待：もちろん

var $navigationLinks = $('.tg-accordion__sidebarLink'); 

if($navigationLinks.length > 0) { 
    $('.tg-desktop__accordionWrapper').waypoint(function(direction) { 
     ... 
    }); 

    ... 
    ... 
    ... 

    function throttle(fn, interval) { 
     ... 
    } 

    function highlightNavigation() { 
     ... 
    } 

    $(window).scroll(throttle(highlightNavigation, 100)); 
} 

、あなたは単一ページのアプリケーション（SPA）を持っていた、と一部のコンテンツは、サイドバーを持っていたし、いくつかはしなかった場合は、このアプローチはないだろう作業。スクロールハンドラを永続的にアタッチしたままにすることもできます（場合によってはnadaを実行する）ことも、スクロールハンドラをコンテンツに合わせてアタッチ/デタッチすることもできます。