Question

我在页面上有大中图像，当我的社交链接显示在这些图像上时，我想淡出社交链接，并在他们离开图像时淡出。中型和大型图像的数量将因页面而异。您可以在Medium.com帖子上看到它。

https://blog.fullstory.com/assess-customer-frustration-with-fullstory-rage-grade-497cf7b7aba1

以下代码仅适用于大图片。当我尝试添加中等图像时，它不起作用。我的社交链接从顶部固定大约600px。提前谢谢！

var large_images = $('img[src*="#large"]'),
        medium_images = $('img[src*="#medium"]'),
        social = $('.social-share'),
        $window = $(window),
        showSocial = function() {
            if (isHidden) {
                isHidden = false;
                social.fadeIn(200);
            }
        },
        hideSocial = function() {
            if (!isHidden) {
                isHidden = true;
                social.fadeOut(200);
            }
        },
        isHidden = true,
        scrollTop;

    if (large_images.length) {
        $window.on('scroll', function() {
            var flag = false;

            scrollTop = $window.scrollTop() + 400;
            $.each(large_images, function(i, large_image) {
                var $large_image = $(large_image),
                    offset = $large_image.offset().top;

                if (offset < scrollTop && offset + $large_image.height() > scrollTop) {
                    flag = true;
                    return false;
                }
            });

            if (flag) {
                hideSocial();
            } else {
                showSocial();
            }
        });
    }

Answer 1

由于您只是循环浏览#large张图片，因此您只需循环浏览#medium张图片。您对#large使用的逻辑应该可以正常使用#medium图像，假设唯一的区别是大小。

您可以将large_images, medium_images变量替换为all_images = $('img[src*="#large"],img[src*="#medium"]')，然后将jquery中其他2个large_images引用更改为all_images

在media.com上滚动某些图像时隐藏社交链接

1 个答案: