文章/答案/技术大牛

发布

社区首页 >问答首页 >滚动时显示JQuery qtip

问滚动时显示JQuery qtip
EN

Stack Overflow用户

提问于 2018-04-28 10:28:13

回答 1查看 118关注 0票数 0

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

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

我浏览了一下文档，发现了http://qtip2.com/options#show.ready，但问题是它不能与scroll事件一起使用。

 <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

Stack Overflow用户

发布于 2018-04-29 02:13:54

是这样解决的：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50072271

复制

相似问题

问滚动时显示JQuery qtip
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动时显示JQuery qtipEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动时显示JQuery qtip
EN