Question

我有一个附带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>

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

在滚动时显示JQuery qtip

1 个答案: