Question

我正在尝试向一些动态元素添加一些滚动效果（通过jQuery添加类）。我只能让它在第一个（下面的代码）或所有它们同时（没有：first选择器）上工作。

是否只有在显示唯一元素时，才可以在所有＃col-3-XXXX元素及其子元素上使用它？

先谢谢您

jQuery(function() {
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();
        if (scroll >= jQuery('[id^=col3]').offset().top - jQuery(window).height()/2.5) {
            jQuery(".col-left:first").addClass("lefter");
            jQuery(".col-right:first").addClass("righter");
        } else {
            jQuery(".col-left:first").removeClass("lefter");
            jQuery(".col-right:first").removeClass("righter");
        }
    });
});

Answer 1

您可以使用：

jQuery("[attribute^='value']")

它选择元素，其元素attribute的值以value开头，在您的代码中：

$("[id^='col-3']")

更新：

您必须确定element是否可见，如果是，则应用这些类：这种检查元素是否在视口中的方法：

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

样品用量：

$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // add your classes
    } else {
        // remove old classes
    }
})

更新2：根据您的评论，您可以执行以下操作：

$(window).on('resize scroll', function() {
    $(".col-left").each(function(index) {
        if ($(this).isInViewport()) {
            $(this).addClass("lefter");
        } else {
            $(this).removeClass("lefter");
        }
    });
    $(".col-right").each(function(index) {
        if ($(this).isInViewport()) {
            $(this).addClass("righter");
        } else {
            $(this).removeClass("righter");
        }
    });
});

jQuery Selector动态ID和子类

1 个答案: