title: What am I missing to make ScrollSpy work?
body: <p>I've copied the files from <a href="http://jsfiddle.net/ia_archiver/9AgUS/" rel="nofollow">http://jsfiddle.net/ia_archiver/9AgUS/</a> as such:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;MWE Scrollspy&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="/path/to/scrollspy.css" /&gt;
  &lt;/head&gt;
  
  &lt;body data-spy="scroll" data-target="#navbar"&gt;
      &lt;div id="post1" class="box"&gt;
          &lt;h1&gt;Post 1&lt;/h1&gt;
          &lt;p&gt; Scroll Down?&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="post2" class="box"&gt;&lt;h1&gt;Post 2&lt;/h1&gt;&lt;/div&gt;
      &lt;div id="post3" class="box"&gt;&lt;h1&gt;Post 3&lt;/h1&gt;&lt;/div&gt;
  
      &lt;div id="navbar"&gt;
          &lt;ul class="nav"&gt;
              &lt;li&gt;&lt;a href="#post1"&gt;Post 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#post2"&gt;Post 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#post3"&gt;Post 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>in scrollspy.html, and:</p>
  
  <pre><code>@import url(http://getbootstrap.com/2.3.2/assets/css/bootstrap.css);
  html{ background: #fff;}
  .box{
      margin: 20px; padding: 15px;
      background: #eee;
      height: 500px;
  }
  #navbar{
      position: fixed;
      bottom: 0; left: 20px;
      width: 100%;
      background: #fff;
  }
  .nav li a{
      float: left;
      width: 80px;
      padding: 15px 0;
  }
  .nav li a:hover{
      color: #f33 !important;
      background: none;
  }
  .nav li.active a{
      color: #f55;
      text-decoration: underline;
  }
  </code></pre>
  
  <p>in scrollspy.css.</p>
  
  <p>I don't see what I'm missing, though the ScrollSpy feature does not work (while all CSS is all right).</p>
  
  <p>Can you help me identify what I'm clearly missing??  Thanks a lot!</p>
  
  <p><strong>UPDATE 2015-04-02:</strong> Here is what I get on the console:</p>
  
  <pre><code>HTML1406: Invalid tag start: "&lt;?". Question marks should not start tags. 
  scrollspy.html, line 1 character 2
  HTML1524: Invalid DOCTYPE. The shortest valid doctype is "&lt;!DOCTYPE html&gt;". 
  scrollspy.html, line 2 character 1
  SCRIPT1002: Syntax error 
  bootstrap-scrollspy.js, line 1 character 1
  </code></pre>
  
  <p>Not that explicit -- at least to me.</p>