Jquery - Stick element on bottom of the page until scrolled to it - page with accordion

问题

I have an element, that is sticked to the bottom of the page using waypoints.js and the following code:

  $('.sticky-container').waypoint(function (direction) {
      if (direction == 'down') {
          $(this).addClass('active');
      } else {
          $(this).removeClass('active');
      }
  },{offset:'100%'});

This works fine, but I also have accordions on my page - when I open the accordion item, the page height changes, but the change isn't reflected in the waypoint script and the sticky element disappears too soon.

I created jsfiddle to explain better what I mean: http://jsfiddle.net/SCr5L/3/

How can this be fixed?

回答1:

For anyone needing this, I got response from waypoints.js support:

Bootstrap's hide.bs.collapse and show.bs.collapse fire at the beginning of the collapse transitions. You want to use the events that fire when the transition is complete, hidden.bs.collapse and shown.bs.collapse:

$('.collapse').on('shown.bs.collapse hidden.bs.collapse', function (e) {
    e.stopPropagation();
    $.waypoints('refresh');
})

Works like a charm for me.

来源：https://stackoverflow.com/questions/23058578/jquery-stick-element-on-bottom-of-the-page-until-scrolled-to-it-page-with-ac