1

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

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

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

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

4

5 回答 5

3

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

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

$('.column:in-viewport').addClass ('swoosh');
于 2013-07-05T14:01:21.600 回答
1

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

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

});
于 2013-07-05T14:57:30.340 回答
1 
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);
});

这尚未经过测试，但应该可以工作。checkViewportAndSetClass将在用户在 1 秒延迟后滚动时调用（这样它就不会一直运行）。

于 2013-07-05T13:57:59.883 回答
1

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

以下库看起来不错。

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

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

$(".column:in-viewport").addClass("swoosh");
于 2013-07-05T14:01:42.687 回答
0

我还没有尝试过...但是您可以在这里查看 并执行以下操作：

$(":onScreen").find(".column").addClass("swoosh")
于 2013-07-05T13:59:40.150 回答