如何实现进入视图时淡入、离开视图时淡出的效果？

Question

当用户向下滚动并且按钮进入视图时按钮的淡入效果，以及当用户继续向下滚动并且按钮离开视图时的淡出效果。

 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');
        }
      });

Answer 1

这对我有用

$(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();
        }
      });
 });