Question

如何将类添加到当前在视口中/目前在窗口中可见的.column类的所有元素中？

例如，在伪代码中是这样的：

If(in window){
    If has class .column{
        add class .swoosh;
    }
}

我非常感谢在javascript或jQuery中完成此任务的任何帮助。

Answer 1

看看这个jQuery插件; http://www.appelsiini.net/projects/viewport

它允许您使用:in-viewport选择器来检查元素是否在当前视口中。

$('.column:in-viewport').addClass ('swoosh');

Answer 2

function isElementInViewport(el) {
    // from http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document. documentElement.clientWidth) /*or $(window).width() */
        );
}

$.fn.checkViewportAndSetClass = function() {
  $(this).each(function(){
    if (isElementInViewport(this)) {
      $(this).addClass("swoosh");
    } 
  });
};

var do_it;
$('.column').checkViewportAndSetClass();

$(window).on("scroll", function() {
  clearTimeout(do_it);
  do_it = setTimeout(function() { 
    $('.column').checkViewportAndSetClass();
  }, 1000);
});

这尚未经过测试但应该有效。当用户在1秒延迟后滚动（因此它不会持续运行）时，将调用checkViewportAndSetClass。

Answer 3

您需要一种方法来选择视口内的元素。

以下图书馆看起来不错。

http://www.appelsiini.net/projects/viewport

在jquery之上添加该库之后。你可以做到

$(".column:in-viewport").addClass("swoosh");

Answer 4

或者，如果您决定采用无插件方式 - 此代码会检查元素是否位于滚动窗口的顶部或底部边缘的上方或下方。

jsFiddle

使用CodePen因为jsFiddle现在对我来说已经死了。

$(window).scroll(function () {
    var windowSize = $(window).height();
    var windowPosition = $(window).scrollTop();
    var control = $(".element");
    control.each(function () {
        var elementPosition = $(this).position().top;
        var elementHeight = $(this).height();
        var elementInWindow = (windowSize + windowPosition > elementPosition) - (windowPosition - elementHeight < elementPosition);
        if (elementInWindow == 0) {
            $(this).addClass("blue");
        } else {
            $(this).removeClass("blue");
        }
    });

});

Answer 5

我还没试过......但是你可以看看here 并做一些类似的事情：

$(":onScreen").find(".column").addClass("swoosh")

将类添加到当前窗口中的所有元素

5 个答案: