title: using a modal overlay with twitter bootstrap scrollspy - incorrect activation
body: <p>I have a nav menu bar based on twitter bootstrap that uses scrollspy to for hightlighting.</p>
  
  <p>this works by matching the value after the # in a link (e.g. <code>&lt;a href="#foo"&gt;</code> when <code>&lt;div id="foo"&gt;</code> scrolls into view). pretty basic, here's the doco: <a href="http://twitter.github.com/bootstrap/javascript.html#scrollspy" rel="nofollow">http://twitter.github.com/bootstrap/javascript.html#scrollspy</a></p>
  
  <p>my problem comes when I introduce a link to a bootstrap modal dialogue box within an element that is being spied on. imagine I have:</p>
  
  <pre><code>&lt;ul class="nav"&gt;
    &lt;li&gt;&lt;a href="#info"&gt;a link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#demo" role="button" data-toggle="modal"&gt;modal&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#products"&gt;a different link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt; .. my page .. &lt;/p&gt;
  &lt;div id="info"&gt;&lt;a name="info"&gt;&lt;/a&gt;info on my product&lt;/div&gt;
  &lt;div id="products"&gt;&lt;a name="products"&gt;&lt;/a&gt;a list of my products&lt;/div&gt;
  &lt;div class="modal hide fade" id="demo" tabindex="-1" role="dialog"&gt;
    &lt;div class="modal-header"&gt;my header&lt;/div&gt;
    &lt;div class="modal-body"&gt;some content&lt;/div&gt;
    &lt;div class="modal-footer"&gt;&lt;button&gt;close&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;p&gt; .. more page &lt;/p&gt;
  </code></pre>
  
  <p>the div that represents my modal overlay also uses the #id-of-target format for its href, but since it's included inside the nav (of course) then scrollspy ALSO highlights when the (hidden) div is in view. Depending on where the modal code in on the page, this confuses the menu system's highlighting.</p>
  
  <p>I can see that scrollspy should be modified to only link to items that are <em>visible</em> (and therefore not activate when "demo" scrolls into view) but can't work out how to modify the plugin to only fire if the element is visible, or override the event some other way.</p>
  
  <p>can anyone give me some pointers?</p>