Twitter Bootstrap Scrollspy not working at all

前端未结

关注

 3  1871

I have asked a previous question regarding Bootstrap ScrollSpy and this is my final attempt at trying to get this to work.

What I am trying to achieve is to change t

相关标签:

3条回答

一生所求

2020-12-31 10:24
If you dive into the code for this plugin its actually very imporant that you select the parent to the .nav
```
this.selector = (this.options.target
      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
      || '') + ' .nav li > a'
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

滥情空心

2020-12-31 10:27

Alright, firstly your nav links should individually be wrapped in li tags i.e.

    <div id="dateNav">
      <ul class="nav">
        <li><a href="#d_2013-01-09">9th Jan 2013</a></li>
        <li><a href="#d_2013-01-11">11th Jan 2013</a></li>
        <li><a href="#d_2013-01-18">18th Jan 2013</a></li>
        <li><a href="#d_2013-01-23">23rd Jan 2013</a></li>
        <li><a href="#d_2013-01-25">25th Jan 2013</a></li>
        <li><a href="#d_2013-01-30">30th Jan 2013</a></li>
      </ul>
    </div>

Secondly your <div id="spyOnThis"> div is missing a lot of closing div tags, so they're all nested instead of below each other. I simply removed your <div class="thumbnail clearfix"> divides to leave the following:

    <div id="spyOnThis">
      <h3 id="d_2013-01-09" class="box resultTitle fontSize13">Available on 9th Jan 2013</h3>
      <h3 id="d_2013-01-11" class="box resultTitle fontSize13">Available on 11th Jan 2013</h3>
      <h3 id="d_2013-01-18" class="box resultTitle fontSize13">Available on 18th Jan 2013</h3>
      <h3 id="d_2013-01-23" class="box resultTitle fontSize13">Available on 23rd Jan 2013</h3>
      <h3 id="d_2013-01-25" class="box resultTitle fontSize13">Available on 25th Jan 2013</h3>
    </div>

You can add the divides back in, but make sure you close them or the ScrollSpy won't be able to track it properly and will just break.

0 讨论(0)

长发绾君心

2020-12-31 10:29

You need to move the data-spy and data-target attributes from the body:

<body data-spy="scroll" data-target="#dateNav">

and move them to the div "spyOnThis":

<div id="spyOnThis">

Should be:

<div id="spyOnThis" data-spy="scroll" data-target="#dateNav">

Per the documentation:

"To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component."

Based on your HTML you also need to fix a couple things:

Your list tags are not closed:

<ul class="nav">
    <li>
        <a href="#d_2013-01-09">9th Jan 2013</a>
        <a href="#d_2013-01-11">11th Jan 2013</a>
        <a href="#d_2013-01-18">18th Jan 2013</a>
        <a href="#d_2013-01-23">23rd Jan 2013</a>
        <a href="#d_2013-01-25">25th Jan 2013</a>
        <a href="#d_2013-01-30">30th Jan 2013</a>
    </li>
</ul>

Should be:

<ul class="nav dateNav">
    <li><a href="#d_2013-01-09">9th Jan 2013</a></li>
    <li><a href="#d_2013-01-11">11th Jan 2013</a></li>
    <li><a href="#d_2013-01-18">18th Jan 2013</a></li>
    <li><a href="#d_2013-01-23">23rd Jan 2013</a></li>
    <li><a href="#d_2013-01-25">25th Jan 2013</a></li>
    <li><a href="#d_2013-01-30">30th Jan 2013</a></li>
</ul>

Your divs not properly closed either:

<div id="spyOnThis">
 <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-18" class="resultTitle fontSize13">Available on 18th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
     <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
     <div class="thumbnail clearfix">
     <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
 </div>

Should be (just showing a couple of them):

<div class="thumbnail clearfix">
     <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
</div>
<div class="thumbnail clearfix">
     <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
</div>

Also it seems that the 100% height causes it to only highlight the bottom-most entry in the navbar list.

0 讨论(0)