Question

我有一个<img>标记已经有icon类。

我需要为[animate.css]（http://daneden.github.io/animate.css/）动画的该元素添加两个额外的类。

一旦用户滚动到图像，就需要添加这些额外的类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像素，以便动画开始。

底线：当用户滚动到flip时，如何将animated和<img>类添加到{{1}}？

Answer 1

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

我在这篇文章中使用了以下“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元素在窗口中可见，然后触发

Answer 2

尝试类似

的内容

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

这就是你需要的吗？

Answer 3

您可以使用onscroll事件侦听器和scrollTop属性等待它添加这些类的时间，例如：

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

您可以使用.className（stackoverflow，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添加到图像

3 个答案: