Hide image after certain amount scrolled

Question

I’ve been successful using the code below to hide the element on scroll, but I need to tweak it so it changes opacity after the user scrolls 80vh:

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();

        $('.image123').css({
        opacity: function() {
            var elementHeight = $(this).height(),
            opacity = ((elementHeight - scrollTop) / elementHeight);
            return opacity;
        }
    });
});

Does this answer your question? [jQuery trigger action when a user scrolls past a certain part of the page](https://stackoverflow.com/questions/4627203/jquery-trigger-action-when-a-user-scrolls-past-a-certain-part-of-the-page) — futur, Aug 22 '21 at 04:40
I can see how it is trying to, but no - I’m still not getting it…. — crapatjquery, Aug 23 '21 at 10:08

score 0 · Answer 1 · answered Aug 23 '21 at 15:26

Try this:

$(window).scroll(function () {
    var vh = (document.documentElement.clientHeight * 80) / 100;//80vh to px
    var scrollTop = $(this).scrollTop();
    var current = parseFloat($('.image123').css('opacity'));
    var opacity = Math.min(Math.max((scrollTop >= vh ? current - 0.1 : current + 0.1), 0), 1);
    $('.image123').css({opacity: opacity});
});

Hide image after certain amount scrolled

1 Answers1