jQuery .animate moves multiple divs in IE8 (not IE7)

I'm using jQuery .animate to slide a div alongside a table, as the window scroll is triggered. The function works properly in Firefox, Chrome, and IE7, but not in IE8.

In IE8, the sliding div and the table both move on window.scroll.

An example of the correct functionality can be seen here: http://www.wduffy.co.uk/blog/wp-content/demos/jquery-scrolling-element/

The jQuery

var $scrollingDiv = $("#hover_sidebar");
$(window).scroll(function(){
    $scrollingDiv
        .stop()
        .animate({"marginTop": ($(window).scrollTop() - 100) + "px"}, "slow" );
});

The HTML

<div class="grid_7 alpha" >
    <table id="protocol_index">
        <thead>
        <tr id="protocol_index_header">
            <th>Protocol Name</th>
            <th>Maximally defined<br/> refill period</th>
            <th>Non-integrated <br/>Usability Index <%= image_tag "help.png", :id  => "usability_index", :size  => "21x21" %></th>
        </tr>
        </thead>
        <tbody>
        <% @protocol_sets.each do |set| %>
        <tr class="<%= cycle("even", "odd") %> <%= set.name.gsub(" ", "_") %> row">             
            <td><%= link_to set.name, set %></td>
            <% if set.workflow_nodes.find_by_name("ActionYes").refill_time > set.workflow_nodes.find_by_name("ActionNo").refill_time %>
            <td><%= set.workflow_nodes.find_by_name("ActionYes").refill_time %></td>
            <% elsif set.workflow_nodes.find_by_name("ActionYes").refill_time < set.workflow_nodes.find_by_name("ActionNo").refill_time %>
            <td><%= set.workflow_nodes.find_by_name("ActionNo").refill_time %></td>
            <% else %>
            <td><%= set.workflow_nodes.find_by_name("ActionYes").refill_time %></td>
            <% end %>

            <% if set.complexity > 30 %>
            <td class="poor_usability">Poor
            <% elsif set.complexity <= 30 && set.complexity >= 20 %>
            <td class="medium_usability">Medium
            <% elsif set.complexity < 20 %>
            <td class="good_usability">Good
            <% end %>
            </td>
        </tr>
        <% end %>
        </tbody>
    </table>
</div>
<div id="hover_sidebar" class="grid_5 omega">
    <h5>Medication classes</h5>
    <p id="no_protocol_hover">(Hover on a protocol to view its medication classes)</p>
    <% @protocol_sets.each do |set|%>
    <ol class="<%= set.name.gsub(" ", "_") %>">
        <% if set.name == "General"%>
            <li><p>All Other Medications Not Covered</p></li>
        <% end %>
        <% set.med_classes.each do |med|%> 
            <li><p><%= "#{med.name.split(" ").each{|word| word.capitalize!}.join(" ")}" %></p></li>
            <%# If you want medications that are within each class uncomment the following three lines %>
            <%# med.medications.each do |m| %>
                <%# m.name %>
            <%# end %>
        <% end %>
    </ol>
    <% end %>
</div>开发者_JS百科;

I've seen IE8 have weird behavior around margins effecting unanticipated elements. Try this:

1. Set position: relative; for #hover_sidebar in your CSS
2. Animate the top property instead of marginTop