Question

对于我正在处理的网站，我需要在元素滚动到视图时为其添加一个类。页面上有多个元素，需要这些元素。

我设置了一个显示其工作原理的小提琴：http://jsfiddle.net/e8qX9/35/

以下是导致我出现问题的部分：

if ($('#one').doesExist()) { // checks if element exists
    $(window).scroll(function () { // on scroll
        addInView('#one', 'slideleft', 0.2); // run function with params
    });
    addInView('#one', 'slideleft', 0.2); // run function again on page load
}

if ($('#two').doesExist()) {
    $(window).scroll(function () {
        addInView('#two', 'slideright', 0.5);
    });
    addInView('#two', 'slideright', 0.5);
}

if ($('#three').doesExist()) {
    $(window).scroll(function () {
        addInView('#three', 'slideup', 0.2);
    });
    addInView('#three', 'slideup', 0.2);
}

if ($('#four').doesExist()) {
    $(window).scroll(function () {
        addInView('#four', 'slidedown', 0.5);
    });
    addInView('#four', 'slidedown', 0.5);
}

if ($('#five').doesExist()) {
    $(window).scroll(function () {
        addInView('#five', 'slideleft', 0.2);
    });
    addInView('#five', 'slideleft', 0.2);
}

我想知道是否有更好的方法可以多次运行此功能，无论是在页面加载还是滚动时。我考虑过创建一个多维数组并循环遍历它，但不能完全了解它。

由于

Answer 1

好吧，在数组循环部分，你可以拥有这个

$('section[id]').each(function(i, e){
    $(window).scroll(function() {
        addInView(e, 'slideleft', 0.2);
    });
    addInView(e, 'slideleft', 0.2);
});

其中section [id]匹配具有id的所有section元素。您应该使用css类并尝试尽可能避免id。

每个元素使用i = index和e = element的函数迭代这些元素。

除此之外，您在窗口上为每个元素注册一个滚动事件，这是不好的。它最好只注册一个事件，并在那里做必要的工作。也许找到另一种事件类型（不确定这是否可行http://api.jquery.com/visible-selector/）

Answer 2

（函数（$）{

$.fn.gAppear = function(options){

    var defaults = {
        slideDuration: 0.2,
        slideDirection: "slideleft"
    };

    options = $.extend(defaults, options);

    var appear = $(this); 

    $(window).scroll(function () {
        addInView(appear, defaults.slideDirection, defaults.slideDuration);
    });
   addInView(appear, defaults.slideDirection, defaults.slideDuration);


    function isScrolledIntoView(elem, vpoffset) {    
        var docViewTop = $(window).scrollTop();
         //$(elem).text(docViewTop);
        var docViewBottom = docViewTop + $(window).height();
         //$(elem).text(docViewBottom);
        var elemTop = $(elem).offset().top + ($(elem).height()*vpoffset);
        $(elem).text(docViewBottom+" "+elemTop);
        return (docViewBottom >= elemTop);

    }

    function addInView(trigger, cssClass, vpoffset) {
        if (isScrolledIntoView(trigger, vpoffset)) {
            if (!$(trigger).hasClass(cssClass)) {
                $(trigger).addClass(cssClass);
            }
        }
    }

};

}）（jQuery的）;

//实例

$（ '＃一个'）。gAppear（{ slideDirection：“slideright”， slideDuration：0.1 }）;

$（ '＃2'）。gAppear（{ slideDirection：“slideleft” }）;

jQuery使用不同的参数多次迭代函数

2 个答案: