发表新帖
发表新帖

Twitter Bootstrap scrollspy always selecting last element

后端 未结
关注
13 1569
旧巷少年郎
旧巷少年郎 2020-12-08 04:22

I have an issue with scrollspy, recreated in this fiddle: http://jsfiddle.net/jNXvG/3/

As seen in the demo, the ScrollSpy plugin always keeps the last menu item sele

相关标签:
13条回答
  • 抹茶落季
    2020-12-08 05:01

    In my case, Firefox was always selecting the last element and it was NOT the 

    height:100%;

    on the body that was causing the problem (as I didn't have anything like that).

    It was a 

    position:absolute;

    on a container div.

    Hope it helps someone out there...

    0 讨论(0)
  • 不要未来只要你来
    2020-12-08 05:04

    I had this same problem; removing the height: 100% from the <body> element fixed this for me.

    0 讨论(0)
  • 猫巷女王i
    2020-12-08 05:05

    I had the exact same problem and for me, adding height: 100% to the body element was the fix.

    (stricly nothing else seemed to make it work)

    0 讨论(0)
  • 眼角桃花
    2020-12-08 05:05

    I fixed it using body height 100% but it didnt work on Firefox. After wasting so much time found the answer on github page. Applying height 100% to HTML tag fixes the issue both for Chrome and Firefox.

    https://github.com/twbs/bootstrap/issues/5007

    0 讨论(0)
  • 情歌与酒
    2020-12-08 05:07

    If anyone else's issue wasn't solved by the suggestions above try adding <!DOCTYPE html> to the first line of your page. This was a simple step which solved the problem for me.

    0 讨论(0)
  • 轮回少年
    2020-12-08 05:07

    ScrollSpy is pretty unforgiving and the documentation is sparse to say the least...there are different and conflicting fixes for this based on your implementation...

    Nested content was my problem. This fixed it for me:

    (1) make sure all hrefs in your nav match a corresponding ID in your spied upon target container.

    (2) If the items in your spied upon content container are nested then it won't work...

    This: 

    <ul class="nav" id="sidebar">
  <li>
     <a href="#navItem1" />
  </li>
  <li>
     <a href="#navItem2" />
  </li>
</ul>
<div id="spiedContent"> <!-- nested content -->
   <div id="navItem1">
      <div id="navItem2"></div>
   </div>    

</div>

    To This: 

    <ul class="nav" id="sidebar">
  <li>
     <a href="#navItem1" />
  </li>
  <li>
     <a href="#navItem2" />
  </li>
</ul>
<div id="spiedContent"> <!-- flat content -->
   <div id="navItem1"></div>    
   <div id="navItem2"></div>
</div>

    All good!

    My guess if you looked at the scrollspy code its not looking past the first child of the spied container for the ids.

    0 讨论(0)
 看不清?
提交回复
热议问题