Question

因此，在这个小说中，当图像全部出现在窗口中时，图像会显示出来。我需要图像在75％或窗口中间时出现。我该怎么做？

 $(window).on("load",function() {
      function fade(pageLoad) {
        var min = 0;
        var max = 1;
        var threshold = 0.01;

        $(".fade").each(function() {
          /* Check the location of each desired element */
          var objectBottom = $(this).offset().top + $(this).outerHeight();
          var windowBottom = $(window).scrollTop() + $(window).innerHeight();

          /* If the element is completely within bounds of the window, fade it in */
          if (objectBottom < windowBottom) { //object comes into view (scrolling down)
            if ($(this).css("opacity")<=min+threshold || pageLoad) {$(this).fadeTo(300,max);}
          } else { //object goes out of view (scrolling up)
            if ($(this).css("opacity")>=max-threshold || pageLoad) {$(this).fadeTo(300,min);}
          }
        });
      } fade(true); //fade elements on page-load
      $(window).scroll(function(){fade(false);}); //fade elements on scroll
    });

Answer 1

您好找到了这个解决方案：

  $(window).on("load",function() {
      $(window).scroll(function() {
        var winheight = $(window).innerHeight();
        $(".fade").each(function() {
          /* Check the location of each desired element */
          var objectBottom = $(this).offset().top + $(this).outerHeight();
          var windowBottom = $(window).scrollTop() + $(window).innerHeight();

          /* If the element is completely within bounds of the window, fade it in */
          if ( windowBottom > (objectBottom - (winheight*0.65))) { //object comes into view (scrolling down)
            if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
          } else { //object goes out of view (scrolling up)
            if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
          }
        });
      }); $(window).scroll(); //invoke scroll-handler on page-load
    });

更改窗口 - 检查位置 - 从下到中

1 个答案: