如何更改滚动位置？

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