Search code examples
javascriptcsstwitter-bootstrapnavbarsidebar

Items in the doc sidebar are not activated automatically


I copied this example in jsfiddle to make a plunker. But the items in the sidebar can not be activated while scrolling. The follows are external links.

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

I also tried to copy them into 3 proper files, and test locally on my machine. It is the same problem.

Does anyone know what I am missing?


Solution

  • The fiddle is running the jQuery after page load. The plunker is not.

    $(document).ready(function() {
       $('body').scrollspy({
        target: '.bs-docs-sidebar',
        offset: 40
      });
    });
    

    https://plnkr.co/edit/qiojBFqmZcpclWWpDbrb?p=preview