jquery - bootstrap scrollspy first li only is highlighted -
i trying use scrollspy spy on set of dyanamically generated instructions, it's not working. first li item highlighted regardless of page position. body tag follows <body data-spy="scroll" data-target=".stickysteps"> and how scrollspy activated <% if manual.present? && manual.steps.present? %> <div class="stickysteps"> <ul class="nav nav-pills"> <% n = 0 %> <% @manual.steps.order(:priority).each |step| %> <li><a href="#step<%= n+1 %>"><h4>step <%= n + 1 %></h4></a></li> <% n += 1 %> <% end %> </ul> </div> <h1 style="margin-left: 20px;">your instructions:</h1> </br> <% steps = manual.steps.order(:priority) %> <%= render(steps.order(:priority), steps: steps) %> <% end %> <script type="text/javascript"> $('.stickysteps