I am facing an issue with fading out social links that appear over medium and large images on a webpage. I want the social links to fade out when they are over the images and fade back in once they move off the images. The number of medium and large images may vary on each page. To see an example, you can visit a post on Medium.com.
The code provided below currently only works for large images. When attempting to include medium images as well, it does not function properly. My social links are fixed at about 600px from the top of the page. Any help would be appreciated!
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();
}
});
}