实现滚动时自动显示JQuery qtip，仅展示顶部可见元素的qtip

我之前也折腾过这个需求，show.ready确实只能在页面初始化时触发，没法跟着滚动动态调整。不过咱们可以自己写滚动监听逻辑来实现，核心思路就是滚动时找出视口内最靠上的可见元素，只显示它的qTip，其他的都隐藏。

下面是具体的实现步骤，你可以直接套用：

1. 先初始化所有目标元素的qTip #

首先给需要绑定qTip的元素做初始化，注意默认要把显示关掉，不然一开始就全弹出来了：

// 替换成你实际的元素选择器
$('.your-qtip-elements').qtip({
  content: {
    text: function() {
      // 这里用data属性存qTip内容，你可以换成自己的内容来源
      return $(this).data('qtip-text');
    }
  },
  show: false, // 默认隐藏，避免初始就显示
  hide: {
    fixed: true, // 防止qTip跟着页面滚动错位
    event: 'unfocus' // 可选：失去焦点时隐藏，也可以加scroll，但我们自己控制隐藏更精准
  },
  // 自定义你的qTip位置和样式
  position: {
    my: 'bottom center',
    at: 'top center'
  },
  style: {
    classes: 'qtip-custom' // 可以加自定义样式类
  }
});

2. 写个函数找出视口内最顶部的可见元素 #

这个函数会遍历所有目标元素，判断哪些在视口内，然后挑出最靠上的那个：

function getTopVisibleElement(selector) {
  let topElem = null;
  let lowestTop = Infinity; // 记录最小的top值，也就是最靠上的元素
  
  $(selector).each(function() {
    const $elem = $(this);
    const elemTop = $elem.offset().top;
    const elemBottom = elemTop + $elem.outerHeight();
    const viewportTop = $(window).scrollTop();
    const viewportBottom = viewportTop + $(window).height();
    
    // 判断元素是否至少部分在视口内
    if (elemBottom > viewportTop && elemTop < viewportBottom) {
      // 更新最靠上的元素
      if (elemTop < lowestTop) {
        lowestTop = elemTop;
        topElem = $elem;
      }
    }
  });
  
  return topElem;
}

3. 绑定滚动事件，加防抖避免性能问题 #

滚动事件触发频率很高，加个防抖函数可以减少不必要的计算，然后在滚动时控制qTip的显示隐藏：

// 防抖函数：避免滚动时频繁执行逻辑
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 绑定滚动监听
$(window).on('scroll', debounce(function() {
  const $targetElem = getTopVisibleElement('.your-qtip-elements');
  
  // 先隐藏所有qTip
  $('.your-qtip-elements').qtip('hide');
  
  // 如果找到目标元素，显示它的qTip
  if ($targetElem) {
    $targetElem.qtip('show');
  }
}, 100)); // 100ms的延迟，可根据需求调整

// 页面加载完成后触发一次，确保初始状态正确
$(document).ready(function() {
  $(window).trigger('scroll');
});

一些注意事项 #

• 记得把.your-qtip-elements替换成你实际使用的元素选择器
• 如果你的元素是动态加载的（比如通过AJAX获取），要在元素渲染完成后重新初始化qTip，并且重新绑定滚动逻辑
• 可以根据自己的需求调整qTip的位置、样式，还有防抖的延迟时间
• hide配置里的fixed: true一定要加上，不然qTip会跟着页面滚动跑位，体验很差

内容的提问来源于stack exchange，提问作者ZenKurd