滚动时向图像添加类

Question

我有一个 <img> 标签，其中已经有 icon class。

我需要向该元素添加两个额外的 classes 以实现 [animate.css] (http://daneden.github.io/animate.css/) 动画。

那些额外的 classes，flip 和 animated，需要在用户滚动到图像时添加。

我尝试了很多不同的方法，但都没有奏效。这是 html：

<div class="col-md-12 ">
    <div class="box">
        <img src="img/world.png" class="icon"/>
        <h1>WEB<br/>DESIGN</h1>
    </div>
</div>

用户应向下滚动 1328 像素左右，以便动画开始。

底线： 如何在用户滚动到 <img> 时将 flip 和 animated class 添加到 <img>是吗？

Answer 1

试试

window.onscroll = function() { 
  var scrollTop = window.pageYOffset;
  if(scrollTop > 1328) {
    //do what you want.
    alert(scrollTop);
  }
}

这是你需要的吗？

Answer 2

你可以这样做：http://jsfiddle.net/AndyMardell/rqgh699w/

我使用了这个 post 中的以下 "isScrolledIntoView" 函数：Check if element is visible after scrolling

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop(),
        docViewBottom = docViewTop + $(window).height(),
        elemTop = $(elem).offset().top,
        elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function(){
    if (isScrolledIntoView('.box')) {
        $('img').addClass('animated flip').css('background', 'red');
    }
});

它等待您的父 .box 元素在 window 中可见，然后触发

Answer 3

您可以使用 onscroll event listener and the scrollTop 属性等到需要添加那些类，例如：

window.onscroll = function() {
    if (document.body.scrollTop > 1328) {
        // add your classes
    }
}

您可以使用 .className (Whosebug, MDN) 实际添加类:

document.querySelectorAll("img.icon")[0].className += " animated flip";
//                                                     ^ note this space

.querySelectorAll 可以很容易地替换为 .getElementsByClassName("icon")。

如果你需要一次性使用动画，上面的例子就可以了，看起来像这样：

window.onscroll = function(){
    if (document.body.scrollTop > 1328){
        document.querySelectorAll("img.icon")[0].className += " flip animated";
    }
}

这里是 JSFiddle。

如果您需要每次都触发动画，请查看this well-commented JSFiddle

滚动时向图像添加类

AddClass to an image when scrolling

javascript

jquery

html

scroll

addclass