Показывать JQuery qtip при прокрутке - PullRequest
Новая
       43

Показывать JQuery qtip при прокрутке

0 голосов
/ 28 апреля 2018

У меня есть список элементов с прикрепленным к каждому 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>

1 Ответ

0 голосов
/ 28 апреля 2018

Решил так: 

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