Question

我一直在关注如何在滚动时淡化元素的教程（https://www.superhi.com/blog/how-to-add-web-design-elements-that-fade-in-and-out-on-scroll）并结束此代码：

HTML：

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">  
</head>

<body>
    <section>Section contents</section>
    <section>Section contents</section>
    <section>Section contents</section>
    <section>Section contents</section>
    <section>Section contents</section>
    <section>Section contents</section>
</body>
<script src="jquery.min.js"></script>
<script src="fade.js"></script>
</html>

CSS：

section {
    font-size: 2em;
    padding: 5% 10%;
    opacity: 0;
    transform: translate(0, 20px);
    transition: all 1s;
}

section.visible {
    opacity: 1;
    transform: translate(0, 0);
}

jQuery的：

$(document).on("scroll", function () {
  var pageTop = $(document).scrollTop()
  var pageBottom = pageTop + $(window).innerHeight()
  var tags = $("section")

  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i]

    if ($(tag).position().top < pageBottom) {
      $(tag).addClass("visible")
    } else {
      $(tag).removeClass("visible")
    }
  }
})

我已经在这里托管了它：www.notewellpress.co.uk/tests/fade.htm

这适用于小提琴和边缘应该如何，但所有的部分元素都在Chrome和Firefox中滚动时被赋予可见类。

如果你能指出我做错了什么，那将是一个很大的帮助。

谢谢！

Answer 1

~~它似乎对我有用，但因为效果恰好发生在页面的最底部，而且淡入淡出效果非常快，所以很难注意到并且可能看起来内容已经存在。~~

<击>
如果你偏移了pageBottom，那么效果会在页面上进一步发生吗？像这样：

<击> if ($(tag).position().top < (pageBottom-200)) {

编辑：虽然JQuery文档建议$（window）.innerHeight（）应该返回视口的高度，但实际上它返回整个文档的高度。

使用浏览器的原生window.innerHeight应该提供准确的视口高度，因此您希望像这样分配pageBottom：

var pageBottom = pageTop + window.innerHeight;

编辑II：经过调查，问题似乎是您在页面开头缺少doctype声明。

<!doctype html>

这可能是因为它适用于小提琴但不适用于您的页面。无论JQuery使用什么方法来返回幕后的高度，似乎跨浏览器的工作方式不同。因此，更可靠的解决方法是添加doctype，然后您应该能够使用原始代码或我上面提到的本机方法。

Answer 2

为什么所有的分号都丢失了？此外，这是非常优化的代码。例如，应在处理程序之外定义tags。您可以使用jQuery＆＃39; s .each代替for循环。为了保留你的代码，我会像这样重写：

＆＃13;

$(document).ready(function() {
  var win = $(window),
    tags = $("section");
    
  $(window).on("scroll", function() {
      var pageBottom = win.scrollTop() + win.innerHeight();
      tags.each(function(i, el) {
        var $el = $(el);
        if ($el.position().top < pageBottom) {
          $el.addClass("visible");
        } else {
          $el.removeClass("visible");
        }
      });
  });
});

＆＃13;

section {
  font-size: 2em;
  padding: 5% 10%;
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1s;
}

section.visible {
  opacity: 1;
  transform: translate(0, 0);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec ullamcorper nisl, vitae aliquet massa. Ut ut lacus metus. Curabitur placerat lacus id posuere euismod. Quisque ullamcorper nunc at lectus pellentesque rhoncus. Mauris euismod tristique
  pulvinar. Vestibulum facilisis varius sapien non euismod. Nulla vitae accumsan diam.</section>
<section>Cras nec auctor libero, id finibus est. Ut faucibus consequat velit ac sodales. Phasellus pellentesque neque quis pellentesque feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris mauris dolor, tincidunt sit amet ante eu, blandit
  suscipit neque. Etiam justo lectus, consequat non sem a, aliquet molestie velit. Sed tincidunt porta odio eget consectetur. In a risus in augue blandit lacinia. Donec ipsum dolor, hendrerit sed ante sit amet, interdum facilisis mauris. Suspendisse ex
  nulla, scelerisque id turpis nec, sodales fringilla est. Donec ac lectus in leo varius ornare id ornare justo. Vivamus dui est, tincidunt feugiat nibh quis, pellentesque ullamcorper arcu. Vivamus porttitor tortor vel lorem pharetra mattis.</section>
<section>Integer euismod risus mollis bibendum tincidunt. Nulla ac rhoncus augue. Cras ac imperdiet eros, sed suscipit tellus. Sed sed iaculis eros. Cras sit amet mi eros. Duis nec dignissim orci. Suspendisse hendrerit est cursus tristique semper. In a metus dapibus,
  venenatis erat posuere, tempus sapien. Nam id condimentum massa.</section>
<section>Fusce euismod ex velit, a aliquam velit tempor eu. Aenean ut sem dui. Sed pellentesque viverra nisl ac sollicitudin. Ut volutpat odio tincidunt sem mattis, eget maximus lectus dapibus. In vestibulum felis vel accumsan efficitur. Nulla sit amet libero
  tempus, laoreet turpis id, lacinia diam. Donec nec dolor eget tortor pretium ultrices. Vestibulum dapibus, felis in consectetur fringilla, ante lacus imperdiet tortor, vel interdum neque massa non erat. Lorem ipsum dolor sit amet, consectetur adipiscing
  elit. Integer molestie rutrum dignissim. Phasellus venenatis malesuada eros a viverra. Ut iaculis placerat urna at laoreet. Vivamus tincidunt malesuada justo, sit amet convallis ipsum. Vestibulum quis fringilla massa. In egestas ultrices lectus, et
  tempor odio iaculis at.</section>
<section>Nam ornare sem id leo bibendum egestas. Quisque vel leo eget dolor lobortis sagittis ac vel diam. Duis pharetra varius tempor. Aenean aliquet sem a felis tempus sagittis. Donec vitae enim faucibus, maximus orci id, consequat arcu. Nulla lorem lorem, semper
  volutpat efficitur a, pulvinar ut urna. Quisque nunc erat, iaculis non accumsan nec, luctus a libero. Praesent suscipit nibh nec ex ultricies porttitor. Etiam finibus purus eu aliquam sodales. Vivamus efficitur blandit tortor a maximus. Donec ex nisi,
  porttitor et nunc a, gravida suscipit dui.</section>
<section>Maecenas consequat ornare imperdiet. Nunc justo sapien, accumsan vitae ligula tincidunt, porttitor mollis tortor. Sed egestas faucibus sagittis. Aliquam ac augue sit amet odio pellentesque rutrum. Nulla facilisi. Aliquam elementum dui quam, eu viverra
  arcu eleifend sit amet. Suspendisse eget facilisis ante, at gravida magna. Vestibulum sed molestie mauris, a lacinia nibh. Vivamus eleifend commodo lorem, et facilisis odio interdum in. Curabitur feugiat placerat tristique.</section>
<section>Nunc eu tellus eu nibh dapibus ultricies ac sit amet leo. Cras varius metus eu arcu convallis efficitur. Nullam sem justo, ultricies vel neque sed, lobortis facilisis nulla. Cras in dui sollicitudin, vestibulum neque et, scelerisque felis. Nullam ornare
  molestie sapien, non semper urna sodales id. Proin aliquam gravida venenatis. Pellentesque pretium massa non risus dignissim, ut malesuada turpis fermentum. Maecenas porta, nisi sit amet maximus sollicitudin, ligula lorem dignissim nulla, at congue
  augue metus in libero. Sed at ligula sagittis, condimentum dui eu, lobortis dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a sodales arcu. Pellentesque at enim quis sem fringilla aliquet. Nam hendrerit, mauris mattis auctor mattis,
  mi lectus malesuada ligula, et volutpat eros nisl in libero.</section>
<section>Nulla facilisi. Curabitur commodo malesuada purus fringilla rutrum. Proin sagittis convallis libero id gravida. Aliquam vestibulum tincidunt sapien, quis congue magna mollis non. Praesent fermentum enim ac elit sollicitudin, et aliquet elit venenatis.
  Etiam molestie in leo at volutpat. Vestibulum non felis non sapien ultricies feugiat et volutpat magna. Pellentesque tincidunt nibh leo, eget aliquam metus tincidunt at. Fusce malesuada nec tellus non mattis. Nam pulvinar interdum quam eget imperdiet.
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vulputate porttitor arcu, vitae ornare neque efficitur quis. Duis fringilla massa id pulvinar iaculis. Nullam nec elit at dui ornare accumsan et eget
  sem.
</section>
<section>Vivamus cursus justo lectus, id feugiat est venenatis sit amet. Mauris aliquet lectus ut neque aliquet mollis sed ut sapien. Cras molestie felis vel odio egestas tristique. Donec vitae feugiat libero, sed eleifend eros. Donec bibendum interdum tristique.
  Etiam et nunc turpis. Aenean pretium erat eget lectus vestibulum scelerisque. Nunc ut nisi sit amet arcu pharetra iaculis. Pellentesque mollis convallis nunc, nec mollis ligula ultricies id. Pellentesque pharetra ut risus volutpat luctus. Aenean in
  magna nec nisl tempor lacinia eget id magna.</section>
<section>Nam at purus sed nibh auctor tempor sed tristique libero. Phasellus nec venenatis elit, nec venenatis ipsum. Pellentesque tincidunt ligula in nibh luctus, eget hendrerit erat fringilla. In suscipit aliquet lacus, condimentum pulvinar est pretium sed.
  Etiam iaculis, sapien eget posuere gravida, neque magna ornare magna, nec dignissim arcu metus eu erat. Nulla tellus magna, sollicitudin nec neque vitae, molestie mollis odio. Sed sit amet velit pretium, commodo quam eget, mollis dui. Etiam tempus orci
  sit amet dui ornare, in elementum lacus facilisis. In vel tincidunt tellus. Fusce a lectus non risus posuere rhoncus non eu neque. In metus libero, consequat quis magna et, sodales faucibus orci. Quisque erat ex, pretium ac turpis at, consectetur blandit
  ante. Cras ligula dui, auctor in dui nec, maximus convallis magna. Sed nunc felis, volutpat eu cursus id, suscipit eget massa. Sed mollis vitae orci dictum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>

＆＃13;

我认为这可以按你的意愿运作？

但即便如此，这似乎并不是一个好主意：在每个卷轴上（可能每秒几十次）你会通过所有部分来检查它们是否应该是可见的。要么使用油门，要么只检查当前可见的元素或者尚未看到的元素。

＆＃13;

$(document).ready(function() {
  var win = $(window),
    tags = $("section");

  $(window).on("scroll", $.throttle(250, checkSectionVisiblity));

  function checkSectionVisiblity() {
    var pageBottom = win.scrollTop() + win.innerHeight();
    tags.each(function(i, el) {
      var $el = $(el);
      if ($el.position().top < pageBottom) {
        $el.addClass("visible");
      } else {
        $el.removeClass("visible");
      }
    });
  }
});

＆＃13;

section {
  font-size: 2em;
  padding: 5% 10%;
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1s;
}

section.visible {
  opacity: 1;
  transform: translate(0, 0);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec ullamcorper nisl, vitae aliquet massa. Ut ut lacus metus. Curabitur placerat lacus id posuere euismod. Quisque ullamcorper nunc at lectus pellentesque rhoncus. Mauris euismod tristique
  pulvinar. Vestibulum facilisis varius sapien non euismod. Nulla vitae accumsan diam.</section>
<section>Cras nec auctor libero, id finibus est. Ut faucibus consequat velit ac sodales. Phasellus pellentesque neque quis pellentesque feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris mauris dolor, tincidunt sit amet ante eu, blandit
  suscipit neque. Etiam justo lectus, consequat non sem a, aliquet molestie velit. Sed tincidunt porta odio eget consectetur. In a risus in augue blandit lacinia. Donec ipsum dolor, hendrerit sed ante sit amet, interdum facilisis mauris. Suspendisse ex
  nulla, scelerisque id turpis nec, sodales fringilla est. Donec ac lectus in leo varius ornare id ornare justo. Vivamus dui est, tincidunt feugiat nibh quis, pellentesque ullamcorper arcu. Vivamus porttitor tortor vel lorem pharetra mattis.</section>
<section>Integer euismod risus mollis bibendum tincidunt. Nulla ac rhoncus augue. Cras ac imperdiet eros, sed suscipit tellus. Sed sed iaculis eros. Cras sit amet mi eros. Duis nec dignissim orci. Suspendisse hendrerit est cursus tristique semper. In a metus dapibus,
  venenatis erat posuere, tempus sapien. Nam id condimentum massa.</section>
<section>Fusce euismod ex velit, a aliquam velit tempor eu. Aenean ut sem dui. Sed pellentesque viverra nisl ac sollicitudin. Ut volutpat odio tincidunt sem mattis, eget maximus lectus dapibus. In vestibulum felis vel accumsan efficitur. Nulla sit amet libero
  tempus, laoreet turpis id, lacinia diam. Donec nec dolor eget tortor pretium ultrices. Vestibulum dapibus, felis in consectetur fringilla, ante lacus imperdiet tortor, vel interdum neque massa non erat. Lorem ipsum dolor sit amet, consectetur adipiscing
  elit. Integer molestie rutrum dignissim. Phasellus venenatis malesuada eros a viverra. Ut iaculis placerat urna at laoreet. Vivamus tincidunt malesuada justo, sit amet convallis ipsum. Vestibulum quis fringilla massa. In egestas ultrices lectus, et
  tempor odio iaculis at.</section>
<section>Nam ornare sem id leo bibendum egestas. Quisque vel leo eget dolor lobortis sagittis ac vel diam. Duis pharetra varius tempor. Aenean aliquet sem a felis tempus sagittis. Donec vitae enim faucibus, maximus orci id, consequat arcu. Nulla lorem lorem, semper
  volutpat efficitur a, pulvinar ut urna. Quisque nunc erat, iaculis non accumsan nec, luctus a libero. Praesent suscipit nibh nec ex ultricies porttitor. Etiam finibus purus eu aliquam sodales. Vivamus efficitur blandit tortor a maximus. Donec ex nisi,
  porttitor et nunc a, gravida suscipit dui.</section>
<section>Maecenas consequat ornare imperdiet. Nunc justo sapien, accumsan vitae ligula tincidunt, porttitor mollis tortor. Sed egestas faucibus sagittis. Aliquam ac augue sit amet odio pellentesque rutrum. Nulla facilisi. Aliquam elementum dui quam, eu viverra
  arcu eleifend sit amet. Suspendisse eget facilisis ante, at gravida magna. Vestibulum sed molestie mauris, a lacinia nibh. Vivamus eleifend commodo lorem, et facilisis odio interdum in. Curabitur feugiat placerat tristique.</section>
<section>Nunc eu tellus eu nibh dapibus ultricies ac sit amet leo. Cras varius metus eu arcu convallis efficitur. Nullam sem justo, ultricies vel neque sed, lobortis facilisis nulla. Cras in dui sollicitudin, vestibulum neque et, scelerisque felis. Nullam ornare
  molestie sapien, non semper urna sodales id. Proin aliquam gravida venenatis. Pellentesque pretium massa non risus dignissim, ut malesuada turpis fermentum. Maecenas porta, nisi sit amet maximus sollicitudin, ligula lorem dignissim nulla, at congue
  augue metus in libero. Sed at ligula sagittis, condimentum dui eu, lobortis dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a sodales arcu. Pellentesque at enim quis sem fringilla aliquet. Nam hendrerit, mauris mattis auctor mattis,
  mi lectus malesuada ligula, et volutpat eros nisl in libero.</section>
<section>Nulla facilisi. Curabitur commodo malesuada purus fringilla rutrum. Proin sagittis convallis libero id gravida. Aliquam vestibulum tincidunt sapien, quis congue magna mollis non. Praesent fermentum enim ac elit sollicitudin, et aliquet elit venenatis.
  Etiam molestie in leo at volutpat. Vestibulum non felis non sapien ultricies feugiat et volutpat magna. Pellentesque tincidunt nibh leo, eget aliquam metus tincidunt at. Fusce malesuada nec tellus non mattis. Nam pulvinar interdum quam eget imperdiet.
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vulputate porttitor arcu, vitae ornare neque efficitur quis. Duis fringilla massa id pulvinar iaculis. Nullam nec elit at dui ornare accumsan et eget
  sem.
</section>
<section>Vivamus cursus justo lectus, id feugiat est venenatis sit amet. Mauris aliquet lectus ut neque aliquet mollis sed ut sapien. Cras molestie felis vel odio egestas tristique. Donec vitae feugiat libero, sed eleifend eros. Donec bibendum interdum tristique.
  Etiam et nunc turpis. Aenean pretium erat eget lectus vestibulum scelerisque. Nunc ut nisi sit amet arcu pharetra iaculis. Pellentesque mollis convallis nunc, nec mollis ligula ultricies id. Pellentesque pharetra ut risus volutpat luctus. Aenean in
  magna nec nisl tempor lacinia eget id magna.</section>
<section>Nam at purus sed nibh auctor tempor sed tristique libero. Phasellus nec venenatis elit, nec venenatis ipsum. Pellentesque tincidunt ligula in nibh luctus, eget hendrerit erat fringilla. In suscipit aliquet lacus, condimentum pulvinar est pretium sed.
  Etiam iaculis, sapien eget posuere gravida, neque magna ornare magna, nec dignissim arcu metus eu erat. Nulla tellus magna, sollicitudin nec neque vitae, molestie mollis odio. Sed sit amet velit pretium, commodo quam eget, mollis dui. Etiam tempus orci
  sit amet dui ornare, in elementum lacus facilisis. In vel tincidunt tellus. Fusce a lectus non risus posuere rhoncus non eu neque. In metus libero, consequat quis magna et, sodales faucibus orci. Quisque erat ex, pretium ac turpis at, consectetur blandit
  ante. Cras ligula dui, auctor in dui nec, maximus convallis magna. Sed nunc felis, volutpat eu cursus id, suscipit eget massa. Sed mollis vitae orci dictum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>

＆＃13;

jQuery适用于Edge但不适用于Chrome或Firefox

2 个答案: