在滚动时显示JQuery qtip

Question

I have a list of elements with JQuery qtip attached to each and I would like the qtip to automatically show when user scrolls the page. 我有一个附加了JQuery qtip的元素列表，我希望qtip在用户滚动页面时自动显示。

Please note that only the qtip for uppermost visible element on top of the page should be shown when scrolling. 请注意，滚动时仅应显示页面顶部最上方可见元素的qtip。

I looked through the docs and came across http://qtip2.com/options#show.ready but the problem with this is it cannot be used with scroll event. 我浏览了一下文档，发现了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>

Answer 1

Solved it like this: 像这样解决它：

    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")
    }

在滚动时显示JQuery qtip

问题描述

1 个解决方案

解决方案1
0 2018-04-28 18:13:53

在滚动时显示JQuery qtip

问题描述

1 个解决方案

解决方案1 0 2018-04-28 18:13:53

解决方案1
0 2018-04-28 18:13:53