2014-09-16 16 views
1

페이지를 아래로 스크롤하면이 스크립트의 제목에 오류가 있습니다. 섹션 탐색 메뉴에 진행률 표시 줄이 필요합니다.

현재 코드 :

(function($) { 
    $(document).ready(function() { 
     var $window = $(window), 
     $body = $(document.body), 
     $doc = $('.doc-container'), 
     $nav = $doc.find ('.doc-nav'); 

     // make the document navigation affix when scroll 
     $nav.affix({ 
      offset: { 
       top: function() { 
        return 200; // replace with your top position to start affix 
       }, 
       bottom: function() { 
        return 300; // replace your bottom position to release the affix 
       } 
      } 
     }); 

     // change navigation active according to scroll 
     $body.scrollspy({ 
      target: '.doc-sidebar' 
     }); 

     // add progress bar for navigation 
     $nav.find ('a').before ($('<span class="docs-progress-bar" />')); 

     $nav.on ('activate activate.bs.scrollspy', function() { 
      $body.scrollspy("refresh"); 
      var $active = $nav.find('li.active'); 
      $active.prevAll().find('.docs-progress-bar').css ('width', '100%'); 
      $active.nextAll().find('.docs-progress-bar').css ('width', '0%'); 
     }); 

     $window.on ('scroll', function (event) { 
      if (this.timeout) { 
       clearTimeout(this.timeout); 
      } 
      this.timeout = setTimeout (function() { 
       var $active = $nav.find('li.active'), 
       $progress = $active.find('.docs-progress-bar'), 
       $scrollspy = $body.data('bs.scrollspy'), 
       scrollTop = $scrollspy.$scrollElement.scrollTop() + $scrollspy.options.offset, 
       scrollHeight = $scrollspy.$scrollElement[0].scrollHeight || $scrollspy.$body[0].scrollHeight, 
       maxScroll = scrollHeight - $scrollspy.$scrollElement.height(), 
       offsets  = $scrollspy.offsets, 
       targets  = $scrollspy.targets, 
       activeTarget = $scrollspy.activeTarget, 
       i; 

       if (scrollTop >= maxScroll) { 
        $progress.css ('width', '100%'); 
        return ; 
       } 

       if (activeTarget && scrollTop <= offsets[0]) { 
        $progress.css ('width', '0%'); 
        return ; 
       } 
       for (i = offsets.length; i--;) { 
        if (scrollTop >= offsets[i] 
        && (!offsets[i + 1] || scrollTop <= offsets[i + 1])) { 
         var p1 = offsets[i], 
         p2 = scrollTop, 
         p3 = !offsets[i + 1] ? maxScroll : offsets[i + 1], 
         p = (p2-p1)/(p3-p1)*100; 
         $progress.css ('width', (p < 2 ? 2 : p) + '%'); 
         return ; 
        } 
       } 
      }, 100); 
     }); 
    }); 
})(jQuery); 

오류이 줄에 있습니다

scrollTop = $scrollspy.$scrollElement.scrollTop() + $scrollspy.options.offset, 

어떤 조언이 문제를 해결하기 위해? 여기

데모 링크 :

$body.data('scrollspy') 

대신 :

$body.data('bs.scrollspy') 

bs 접두사를 사용하는 DEMO

+0

이 오류는'$ scrollspy'가 정의되지 않았 음을 의미합니다. 이것을 디버깅 할 때 해당 변수가 예상대로 채워지는 것입니까? – David

답변

2

당신과 함께 ScrollSpy 플러그인에 대한 참조를 얻을 필요 사용자 정의 이벤트은 부트 스트랩에 등록되어 있으며 데이터.

+0

완벽! 고맙습니다!! – user2316417

관련 문제