當元素在視口中可見時，對div進行動畫處理

Question

我正在嘗試創建一個水平滾動的單頁網站，我在其中使用div作為按鈕來使頁面在單擊時滾動到某個元素。 我有滾動機制，但是當它們鏈接到的元素在視口中可見時，我希望div進行動畫處理（更改大小或顏色等）。 做這個的最好方式是什么？

Answer 1

我不確定您的編碼方式是如何完成的，因為您沒有提供任何代碼/示例，但我會嘗試以某種方式為您提供幫助。

$(function(){
var sections = {},
    _height  = $(window).height(),
    i        = 0;

// Grab positions of our sections 
$('.section').each(function(){
    //this.name would be the attr name="" of a section but you could change to the id
    sections[this.name] = $(this).offset().top;
});

$(document).scroll(function(){
    var pos = $(this).scrollTop();

    // Look in the sections object and see if any section is viewable on the screen. 
    // If two are viewable, the lower one will be the active one. 
    for(i in sections){
        if(sections[i] > pos && sections[i] < pos + _height){
            $('a').removeClass('active');
            $('#nav_' + i).addClass('active');
        }  
    }
});

}）;

該代碼應該實現您希望達到的atm，它只是激活“ active”類，但是您可以根據需要創建Css3動畫。