jQuery-将元素粘在页面底部，直到滚动到它为止-带有手风琴的页面 [英] Jquery - Stick element on bottom of the page until scrolled to it - page with accordion

问题描述

我有一个元素，该元素使用waypoints.js和以下代码粘贴在页面底部:

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.

我创建了jsfiddle以更好地解释我的意思: http://jsfiddle.net/SCr5L/3/

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

如何解决?

推荐答案

对于需要此功能的任何人，我都得到了waypoints.js支持的响应:

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

Bootstrap的hide.bs.collapse和show.bs.collapse在 崩溃过渡的开始.您想使用 转换完成时触发，hidden.bs.collapse和 显示.bs.崩溃:

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.

这篇关于jQuery-将元素粘在页面底部，直到滚动到它为止-带有手风琴的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！