有没有办法在不同的滚动点改变不同的图像？

Question

当我在页面中滚动时，我试图一次更改一个图像。这段代码实际上改变了所有的图像类，当我们到达滚动的那一点时。有没有其他方法可以在滚动时单独更改图像？

谢谢。

jQuery(function($) {
    var show = $(".show");
    var hide = $(".hide");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if($(window).scrollTop() >= 500){
            show.removeClass('show').addClass("hide");
            hide.removeClass('hide').addClass("show");
        } else {
          show.removeClass("hide").addClass('show');
          hide.removeClass('show').addClass("hide");
        }

    });
});

Answer 1

由于您正在检查window和hiding/showing的滚动位置，这将hide/show具有指定类名的所有元素。

为了达到您的目的，向所有图片添加css position: relative (如果尚未指定position )。

然后，遍历每个图像，如下所示...

jQuery(function($) {
    //var show = $(".show");
    //var hide = $(".hide");
    $(window).scroll(function() {    
        /*var scroll = $(window).scrollTop();

        if($(window).scrollTop() >= 500){
            show.removeClass('show').addClass("hide");
            hide.removeClass('hide').addClass("show");
        } else {
          show.removeClass("hide").addClass('show');
          hide.removeClass('show').addClass("hide");
        }*/
        var images = $('img');//or any other selector
        $.each(images, function () {
            if($(this).offset().top <= -500) {
                $(this).hide();
            }
            else {
                $(this).show();
            }
        });

    });
});