html - 在 Bootstrap 中滚动期间未出现“事件”

Question

我正在尝试为一段文本创建一个垂直的 scrollspy。我已经应用了所有必要的标签并用类标记它们。我已经应用了 here 中的更改.

这是我的代码 https://jsfiddle.net/DTcHh/23737

<div class="container">

    <h1>Where's the plag?</h1>
    <div class="jumbotron">
        <small>
            <p>Atom Type: paragraph </p>
            <p>Cluster Method: kmeans </p>
            <p>k: 2 </p>
            Stylistic Feature(s):

            <p>honore_r_measure </p>


        <p></p>
        </small>

         <br>
                <!--<div id='chart-container'></div>-->
                </br>
                <br>

                </br>

        <button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#full_table">
            Hide/Show Table
        </button>

        <div class="row collapse in" id="full_table">
            <div class="col-md-9">
                <div class="table-responsive" style="font-size:12px;">
                    <table class="table table-condensed table-scrollable table-bordered">
                        <thead>
                        <tr>
                            <th>Start Index</th>

                            <th>honore_r_measure</th>

                            <th>Suspicion Score</th>


                        </tr>
                        </thead>
                        <tbody>

                        <tr class="passage_starting_at_">
                            <td class="passage_row"> 0</td>

                            <td class="passage_row"> 2831.7247</td>




                            <td class="passage_row" bgcolor=#F60C0C> 0.9108</td>






                        </tr>

                        <tr class="passage_starting_at_">
                            <td class="passage_row"> 264</td>

                            <td class="passage_row"> 1799.9239</td>




                            <td class="passage_row">0.0288</td>






                        </tr>

                        <tr class="passage_starting_at_">
                            <td class="passage_row"> 720</td>

                            <td class="passage_row"> 1585.1819</td>




                            <td class="passage_row">0.1407</td>






                        </tr>

                        <tr class="passage_starting_at_">
                            <td class="passage_row"> 1470</td>

                            <td class="passage_row"> 2785.1247</td>




                            <td class="passage_row" bgcolor=#F60C0C> 0.9466</td>






                        </tr>

                        <tr class="passage_starting_at_">
                            <td class="passage_row"> 1850</td>

                            <td class="passage_row"> 1762.0442</td>




                            <td class="passage_row">0.0106</td>






                        </tr>

                        <tr class="passage_starting_at_">
                            <td class="passage_row"> 2057</td>

                            <td class="passage_row"> 1942.3584</td>




                            <td class="passage_row">0.1779</td>






                        </tr>

                        <tr class="passage_starting_at_">
                            <td class="passage_row"> 3189</td>

                            <td class="passage_row"> 2567.0830</td>




                            <td class="passage_row">0.8316</td>






                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    <div class="row">
        <div class="col-md-3"><div id="boxplot"></div></div>
        <div class="col-md-9"><div class="panel-heading">
                        rowling_and_dickens
                    </div>
                    <div style="height: 700px;overflow-y: scroll;" class="panel-body col-md-9" id="document_content">
                        <p>




                        <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;0, 262&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.910800725896&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;honore_r_measure&lt;/p&gt;&lt;p&gt;2831.7247&lt;/p&gt;&lt;hr size = &#34;10&#34;"
                             style="font-size:14px;display:inline;color:rgb(255,0,0);" id='pass0'>
                            Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to say
that they were perfectly normal, thank you very much. They were the last
people you'd expect to be involved in anything strange or mysterious,
because they just didn't hold with such nonsense.
                        </div>


                        <br/>







                        <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;264, 718&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.0288266743586&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;honore_r_measure&lt;/p&gt;&lt;p&gt;1799.9239&lt;/p&gt;&lt;hr size = &#34;10&#34;"
                             style="font-size:14px;display:inline;;color:rgb(0,0,0);" id='pass1'>
                            Mr. Dursley was the director of a firm called Grunnings, which made
drills. He was a big, beefy man with hardly any neck, although he did
have a very large mustache. Mrs. Dursley was thin and blonde and had
nearly twice the usual amount of neck, which came in very useful as she
spent so much of her time craning over garden fences, spying on the
neighbors. The Dursleys had a small son called Dudley and in their
opinion there was no finer boy anywhere.
                        </div>



                        <br/>







                        <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;720, 1468&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.1407492634&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;honore_r_measure&lt;/p&gt;&lt;p&gt;1585.1819&lt;/p&gt;&lt;hr size = &#34;10&#34;"
                             style="font-size:14px;display:inline;;color:rgb(0,0,0);" id='pass2'>
                            The Dursleys had everything they wanted, but they also had a secret, and
their greatest fear was that somebody would discover it. They didn't
think they could bear it if anyone found out about the Potters. Mrs.
Potter was Mrs. Dursley's sister, but they hadn't met for several years;
in fact, Mrs. Dursley pretended she didn't have a sister, because her
sister and her good-for-nothing husband were as unDursleyish as it was
possible to be. The Dursleys shuddered to think what the neighbors would
say if the Potters arrived in the street. The Dursleys knew that the
Potters had a small son, too, but they had never even seen him. This boy
was another good reason for keeping the Potters away; they didn't want
Dudley mixing with a child like that.
                        </div>



                        <br/>







                        <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;1470, 1847&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.946586144898&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;honore_r_measure&lt;/p&gt;&lt;p&gt;2785.1247&lt;/p&gt;&lt;hr size = &#34;10&#34;"
                             style="font-size:14px;display:inline;color:rgb(255,0,0);" id='pass3'>
                            When Mr. and Mrs. Dursley woke up on the dull, gray Tuesday our story
starts, there was nothing about the cloudy sky outside to suggest that
strange and mysterious things would soon be happening all over the
country. Mr. Dursley hummed as he picked out his most boring tie for
work, and Mrs. Dursley gossiped away happily as she wrestled a screaming
Dudley into his high chair.
                        </div>


                        <br/>







                        <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;1850, 2055&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.0105840400639&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;honore_r_measure&lt;/p&gt;&lt;p&gt;1762.0442&lt;/p&gt;&lt;hr size = &#34;10&#34;"
                             style="font-size:14px;display:inline;;color:rgb(0,0,0);" id='pass4'>
                            My father's family name being Pirrip, and my Christian name Philip, my infant 
tongue could make of both names nothing longer or more explicit than Pip. So, I 
called myself Pip, and came to be called Pip.
                        </div>



                        <br/>

                        <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;2057, 3187&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.177879051884&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;honore_r_measure&lt;/p&gt;&lt;p&gt;1942.3584&lt;/p&gt;&lt;hr size = &#34;10&#34;"
                             style="font-size:14px;display:inline;;color:rgb(0,0,0);" id='pass5'>
                            I give Pirrip as my father's family name, on the authority of his tombstone and my 
sister - Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or 
my mother, and never saw any likeness of either of them (for their days were long 
before the days of photographs), my first fancies regarding what they were like, 
were unreasonably derived from their tombstones. The shape of the letters on my 
father's, gave me an odd idea that he was a square, stout, dark man, with curly 
black hair. From the character and turn of the inscription, "Also Georgiana Wife of 
the Above," I drew a childish conclusion that my mother was freckled and sickly. To 
five little stone lozenges, each about a foot and a half long, which were arranged 
in a neat row beside their grave, and were sacred to the memory of five little 
brothers of mine - who gave up trying to get a living, exceedingly early in that 
universal struggle - I am indebted for a belief I religiously entertained that they 
had all been born on their backs with their hands in their trousers-pockets, and 
had never taken them out in this state of existence.
                        </div>



                        <br/>







                        <div class="passage" features="&lt;p&gt;Span&lt;/p&gt;&lt;p&gt;3189, 4158&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;Plag. conf.&lt;/p&gt;&lt;p&gt;0.831630019231&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;PLAG SPAN&lt;/p&gt;&lt;p&gt;No plag!&lt;/p&gt;&lt;hr size = &#34;10&#34;&lt;p&gt;honore_r_measure&lt;/p&gt;&lt;p&gt;2567.0830&lt;/p&gt;&lt;hr size = &#34;10&#34;"
                             style="font-size:14px;display:inline;;color:rgb(0,0,0);" id='pass6'>
                            Ours was the marsh country, down by the river, within, as the river wound, twenty 
miles of the sea. My first most vivid and broad impression of the identity of 
things, seems to me to have been gained on a memorable raw afternoon towards 
evening. At such a time I found out for certain, that this bleak place overgrown 
with nettles was the churchyard; and that Philip Pirrip, late of this parish, and 
also Georgiana wife of the above, were dead and buried; and that Alexander, 
Bartholomew, Abraham, Tobias, and Roger, infant children of the aforesaid, were 
also dead and buried; and that the dark flat wilderness beyond the churchyard, 
intersected with dykes and mounds and gates, with scattered cattle feeding on it, 
was the marshes; and that the low leaden line beyond, was the river; and that the 
distant savage lair from which the wind was rushing, was the sea; and that the 
small bundle of shivers growing afraid of it all and beginning to cry, was Pip.

                        </div>
                    </div>
            <nav class="col-sm-3" id="myScrollspy">

                <ul class="nav nav-pills nav-stacked">

                        <li class="active" ><a style="color:rgb(255,0,0);" href='#pass0'>pass0</a></li>
                    <li   ><a style="color:rgb(0,0,0);" href='#pass1'>pass1</a></li>
                    <li   ><a style="color:rgb(0,0,0);" href='#pass2'>pass2</a></li>
                        <li  ><a style="color:rgb(255,0,0);" href='#pass3'>pass3</a></li>
                    <li   ><a style="color:rgb(0,0,0);" href='#pass4'>pass4</a></li>
                    <li   ><a style="color:rgb(0,0,0);" href='#pass5'>pass5</a></li>
                    <li   ><a style="color:rgb(0,0,0);" href='#pass6'>pass6</a></li>
                    </ul>
                </nav>
        </div>

但是，当我滚动浏览文本时，除第一个部分外，事件部分没有突出显示。

请告诉我出了什么问题

Answer 1

在您的 jsfiddle 中工作，我更新到最新的 Bootstrap 和 Jquery 版本(这不是必需的)，之后我在示例中找到了 <body> 上的以下标签元素存在:<body data-spy="scroll" data-target=".navbar" data-offset="50"> .这些属性应该添加到可滚动区域，目标是处理链接的导航栏。以下 jsfiddle 正在运行(编辑您的代码):https://jsfiddle.net/DTcHh/23739/

我在 scrollarea 上添加了属性并给出了 <nav>类名 .mynav :

<div style="height: 700px;overflow-y: scroll;" class="panel-body col-md-9" id="document_content"  data-spy="scroll" data-target=".mynav" data-offset="50">`