0

scrollspy を使用して、動的に生成された一連の命令をスパイしようとしていますが、機能していません。ページの位置に関係なく、最初の li 項目のみが強調表示されます。ボディタグは以下の通り

<body data-spy="scroll" data-target=".stickysteps">

そして、これがscrollspyがアクティブ化される方法です

<% if manual.present? && manual.steps.present? %> 
<div class="stickysteps">
<ul class="nav nav-pills">
    <% n = 0 %>
    <% @manual.steps.order(:priority).each do |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');
});
$('#zoom_01').elevateZoom();

offsetValue = 168;
$('body').data().scrollspy.options.offset = offsetValue;
// force scrollspy to recalculate the offsets to your targets
$('body').data().scrollspy.process();
</script>

これを機能させることができないことに本当にイライラしています。すべてを試したようです。誰かが本当に感謝されるいくつかの入力を提供できれば。

4

0 に答える 0