javascript - 在 medium.com 等特定图片上滚动时隐藏社交链接

Question

我在页面上有中型和大型图像，当我的社交链接显示在这些图像上时，我想淡出社交链接并在它们离开图像时淡入。每页的中型和大型图像数量会有所不同。您可以在 Medium.com 的帖子中看到它的运行情况。

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

下面的代码只适用于大图像。当我尝试添加中等图像时，它不起作用。我的社交链接固定在距顶部约 600 像素的位置。提前致谢!

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 中对 large_images 的其他 2 个引用更改为 all_images