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

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

    });
});