我在页面上有中型和大型图像,当我的社交链接显示在这些图像上时,我想淡出社交链接并在它们离开图像时淡入。每页的中型和大型图像数量会有所不同。您可以在 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();
}
});
}
最佳答案
由于您只循环遍历 #large
图像,因此您只需要循环遍历 #medium
图像。您用于 #large
的逻辑应该适用于 #medium
图像,假设唯一的区别是大小。
您可以将 large_images、medium_images
变量替换为 all_images = $('img[src*="#large"],img[src*="#medium"]')
然后将 jquery 中对 large_images
的其他 2 个引用更改为 all_images
关于javascript - 在 medium.com 等特定图片上滚动时隐藏社交链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45601886/