Bootstrap 3 Scrollspy not working with Affix and Panel

Question

Bootstrap 3 Scrollspy not working with Affix and Panel

7.5k views Asked by Wistar At 27 November 2024 at 00:03

I'm trying to apply the bootstrap ScrollSpy to my affix navbar. There's something I'm missing because I think I've done everything right.

Here's my code:

        <script type='text/javascript' src="//code.jquery.com/jquery.js"></script>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container">
        <div class="row">
            <div class="col-md-2">
              <div id="sidebar">
                    <ul class="nav navbar-default affix">
                        <li><a href="#correct">Correct</a></li>
                        <li><a href="#incorrect">Incorrect</a></li>
                        <li><a href="#omission">Omission</a></li>
                        <li><a href="#premature">Premature</a></li>
                    </ul>
                </div>
            </div>


            <div id="mycontent" class="col-md-10" data-spy="scroll" data-target="#sidebar">

                    <div id="correct" class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">Correct responses</h3>
                        </div>
                        <div class="panel-body">        
                            <h4>Graphic</h4>
                                <img src="/graph/group/post-op/lineerror/12/correct" onerror="imgError(this);"> 
                             <h4>Table</h4> 
                               Table here 
                        </div>
                    </div>

                    <div id="incorrect" class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">Incorrect responses</h3>
                        </div>
                        <div class="panel-body">        
                            <h4>Graphic</h4>
                                <img src="/graph/group/post-op/lineerror/12/incorrect" onerror="imgError(this);"> 
                             <h4>Table</h4> 
                               Table here 
                        </div>
                    </div>

                    <div id="omission" class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">Omission responses</h3>
                        </div>
                        <div class="panel-body">        
                            <h4>Graphic</h4>
                                <img src="/graph/group/post-op/lineerror/12/omission" onerror="imgError(this);"> 
                             <h4>Table</h4> 
                               Table here 
                        </div>
                    </div>

                    <div id="premature" class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">Premature responses</h3>
                        </div>
                        <div class="panel-body">        
                            <h4>Graphic</h4>
                                <img src="/graph/group/post-op/lineerror/12/premature" onerror="imgError(this);"> 
                             <h4>Table</h4> 
                               Table here 
                        </div>
                    </div>
              </div>
        </div>          
    </div>

My links and my affix are working properly but I can't see the scrollspy.

See the adapted jsfiddle here.

Original Q&A

There are 1 answers

**Blazemonger** · Accepted Answer · 2013-12-11 18:12:57

"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 the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component." -- docs.

Those data- attributes must be added to whichever element is being scrolled. Unless #mycontent is overflow:scroll, you need to add those data- attributes to your <body> tag instead.

http://jsfiddle.net/mblase75/qKFqg/

TechQA.

Bootstrap 3 Scrollspy not working with Affix and Panel

There are 1 answers

Related Questions in JQUERY

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in SCROLLSPY

Popular Questions

Popular Tags

Trending Questions