最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Using the twitter bootstrap scroll spy - Stack Overflow

programmeradmin6浏览0评论

I've been trying and trying to get the scroll spy to work on my bootstrap site, but I'm unable to get it to work. The problem I'm having is, scrolling has no effect, wherever I scroll to. You can see what I'm doing here.

I've performed all the steps required i.e. below is the body tag

  <body data-spy="scroll" data-target="#top-fixed-nav">

and nav is also there:

            <ul class="nav" id="top-fixed-nav">
              <li>
                <a href="#home">Home</a>
              </li>
              <li class="">
                <a href="#about">About</a>
              </li>
              <li class="">
                <a href="#howto">How to Use?</a>
              </li>
              <li class="">
                <a href="#contact">Contact</a>
              </li>
            </ul>

Have called the scrollspy as well.

$('#top-fixed-nav').scrollspy();

Can anyone please have a look and please point out what I'm overlooking or doing wrong here.

I've been trying and trying to get the scroll spy to work on my bootstrap site, but I'm unable to get it to work. The problem I'm having is, scrolling has no effect, wherever I scroll to. You can see what I'm doing here.

I've performed all the steps required i.e. below is the body tag

  <body data-spy="scroll" data-target="#top-fixed-nav">

and nav is also there:

            <ul class="nav" id="top-fixed-nav">
              <li>
                <a href="#home">Home</a>
              </li>
              <li class="">
                <a href="#about">About</a>
              </li>
              <li class="">
                <a href="#howto">How to Use?</a>
              </li>
              <li class="">
                <a href="#contact">Contact</a>
              </li>
            </ul>

Have called the scrollspy as well.

$('#top-fixed-nav').scrollspy();

Can anyone please have a look and please point out what I'm overlooking or doing wrong here.

Share Improve this question edited Sep 30, 2014 at 11:47 Kamran Ahmed asked Jul 28, 2013 at 10:10 Kamran AhmedKamran Ahmed 12.4k23 gold badges72 silver badges103 bronze badges 1
  • 3 Try $('body').scrollspy(); – crackmigg Commented Jul 28, 2013 at 11:59
Add a ment  | 

2 Answers 2

Reset to default 5

Docs say:

To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on ( most typically this would be the <body>). Then add thedata-target attribute with the ID or class of the parent element of any Bootstrap .nav ponent.

The code you posted wasn't working because you were spying on #top-fixed-nav (scroll events).

try this: jsfiddle

if Scrollspy highlight final element, you can add

height: 100%

to html and body tag

发布评论

评论列表(0)

  1. 暂无评论