So I have a website I inherited from a client's previous developer. On the homepage is a section (not the hero section) that has a background image and within that section is a div with another background image that is the same height and width as the section. When you scroll past the section, the div background image zooms in.
Out of the blue, it suddenly stopped working - an error with zoom.parallax.js that I cannot figure out. So I have tried an alternate means of re-creating it and have been about 85% successful. Here is my workaround:
https://codepen.io/ladycodemonkey/pen/rNmZYRQ
This works great if the section in question happens to be the hero section, but it isn't. It sits about 1/3 of the way down the page. How do I get the zoom effect to fire ONLY once that section (CSS class zoom-overlay) has come into view?
This is the javascript that triggers the zoom effect:
$(window).scroll(function() {
var scrollPos = $(this).scrollTop();
$(".zoom-inner").css({
'background-size' : 100 + scrollPos + '%'
});
});
Any help would be hugely appreciated!
Cynthia