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

}）;

本守则应该做你想做的事情，它只是活跃的'活跃'课程，但你可以根据需要做一个Css3动画。

在视口中可见元素时为div设置动画

1 个答案: