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

Add a class to all elements that are in current window

本文关键字：元素 窗口 添加      更新时间：2023-09-26

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

例如，在伪代码中，类似这样的东西：

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

如果能在javascript或jQuery中完成这项工作，我将不胜感激。

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

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

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

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

下面的图书馆看起来不错。

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

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

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

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（这样它就不会一直运行）。

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

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

我还没有试过……但你可以看看这里做一些类似的事情：

$(":onScreen").find(".column").addClass("swoosh")
相关文章：