jquery - scrollspy active class flickers with AJAX -
scrollspy causing li flicker between first , second li when scroll down page, once last section correct li becomes active. i'm pretty sure has ajax, can't figure out why. when refresh page scrollspy works perfectly. ideas why happening? i've tried no success.
body tag
<body data-spy="scroll" data-target=".stickysteps">
how scrollspy called
<% 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').scrollspy(); $('[data-spy="scroll"]').each(function () { $('.stickysteps').scrollspy('refresh'); }); offsetvalue = 168; $('body').data().scrollspy.options.offset = offsetvalue; // force scrollspy recalculate offsets targets $('body').data().scrollspy.process(); </script> <%= javascript_include_tag "manuals" %> <%= javascript_include_tag "imagezoom" %>
Comments
Post a Comment