如何更改滾動位置？

Question

我想讓我的內容在滾動時淡入淡出，但它反應遲了。 我怎樣才能改變它，讓我的內容更早地淡入淡出？

我對 javascript 很陌生，還不能讓它工作。

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

      /* 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")==0) {$(this).fadeTo(500,1);}
      } else { //object goes out of view (scrolling up)
        if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
      }
    });
  }).scroll(); //invoke scroll-handler on page-load
});

現在內容空間是空白的，直到我滾動到底部。 我需要讓我的內容在頁面的一半或更早的時候淡入。 也許可以用百分比或像素更改為任何高度？

Answer 1

一旦元素完全在視口中（= 當元素的底部在窗口中時），代碼的共享部分就會淡入淡出元素。

一旦它們的頂部進入視口，淡入淡出的元素怎么樣？

淡出邏輯應保持原樣：一旦元素底部離開視口，元素應淡出。

改編代碼：

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

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