在滚动时显示 JQuery qtip答案

【问题标题】：Show JQuery qtip on scrolling在滚动时显示 JQuery qtip
【发布时间】：2018-04-29 02:13:53
【问题描述】：

我有一个附有 JQuery qtip 的元素列表，我希望 qtip 在用户滚动页面时自动显示。

请注意，滚动时只应显示页面顶部最上方可见元素的 qtip。

我浏览了文档并遇到了http://qtip2.com/options#show.ready 但问题是它不能与滚动事件一起使用。

 <head>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.css">
</head>

<body>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>
    <div>Sample link</div>

    <script>
        $('div').qtip({
            content: 'I use the built-in jQuery .slideUp() and .slideDown() methods',
            show: {
                effect: function () {
                    $(this).slideDown();
                },
            },
            hide: {
                effect: function () {
                    $(this).slideUp();
                }
            }
        });
    </script>

    <style>
        div {
            width: 100px;
            height: 200px;
        }
    </style>
</body>

【问题讨论】：

标签： javascript jquery qtip2 qtip

【解决方案1】：

这样解决了：

    let divs = $('div');

    document.body.onscroll = function () {
        let div height = 200;
        let index = Math.floor(window.scrollY / div_height);
        let div = divs[index];
        if (div.classList.contains("active")) {
            return;
        }

        if (index > 0 && div.previousElementSibling.classList.contains("active")) div.previousElementSibling.classList.remove("active");
        if (index < divs.length && div.nextElementSibling.classList.contains("active")) div.nextElementSibling.classList.remove("active");

        div.classList.add("active")
        $(div).qtip("show")
    }

【讨论】：