Question

我有一些jQuery代码，可向其中包含A HREF的所有“节”中添加类为“ inViewport”的div ...

    $('section').each(function() {
      if ($('a', this).length) {
        $(this).children().wrapAll('<div class="inViewport"></div>');
      }
    });

然后我有一个函数来检查屏幕上是否有东西，然后再做某事（在这种情况下，将一个类添加到a href中）：

$.fn.isOnScreen = function() {

    var win = $(window);

    var viewport = {
        top: win.scrollTop(),
        left: win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};


jQuery(window).scroll(function() {

        setTimeout(function() {
            if ($('.inViewport').isOnScreen()) {
                // The element is visible, do something
                $(".link").addClass("under");
            } else {
                // The element is NOT visible, do something else
                $(".link").removeClass("under");
            }
        }, 0); 

    });

但是，即使该部分不在屏幕上，它似乎也会在页面加载时立即添加该类。

<section id="section1" class="cd-section">
    <h4>Some text here, no link</h4>
</section>
<section id="section2" class="cd-section">
    <h4>Some text here <a href="#">with a link!</a>. jQuery each function wraps this in div</h4>
</section>

当我将其滚动到屏幕之外时，它不会删除该类。

我认为，如果将视口div直接添加到HTML中而不是通过jQuery，则可以正常工作。

如果div滚动到屏幕上，请在准备好后添加由jQuery添加的类

0 个答案: