How to achieve an effect where an item fades in when it comes into view and fades out when it goes out of view?

Fade-in effect for a button when the user scrolls down and button comes into view and a fade-out effect when the user continue scrolls down and button goes out of view.

 var scrollButton = $('#scrollButton');
      
      scrollButton.css('opacity', '0');

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

        if (scrollPos > 100) {
          scrollButton.css('opacity', '1');
        } else {
          scrollButton.css('opacity', '0');
        }
      });

>Solution :

This works for me

$(document).ready(function() {
      var scrollButton = $('#scrollButton');
      
      $(window).scroll(function() {
        // Check if the button is in view
        if (scrollButton.is(':in-viewport')) {
          // Button is in view, fade it in
          scrollButton.fadeIn();
        } else {
          // Button is out of view, fade it out
          scrollButton.fadeOut();
        }
      });
 });