时间戳

首页 > 解决方案 > 在滚动时淡入淡出，如果内容已经在可视区域中怎么办？

javascript - 在滚动时淡入淡出，如果内容已经在可视区域中怎么办？

问题描述

我有这段代码可以在滚动网页时淡入/淡出元素。唯一的问题是我页面顶部的内容会淡出，直到您滚动为止。我想在页面加载并淡入第一个可见项目时检查可见区域，我该怎么做？

$(document).on("scroll", function () {
  var pageTop = $(document).scrollTop()
  var pageBottom = pageTop + $(window).height()
  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")
    }
  }
})

section {
  opacity: 0;
  transform: translate(0, 20px); 
  transition: all 1s;
}

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

标签： javascriptcss

解决方案

您可以分别检查页面准备就绪和滚动并调用函数以使该部分可见。（我将 margin-bottom:20px; 添加到 css 部分仅用于演示目的）。运行底部的代码片段以查看它。

$(document).ready(function() {
    setVisibility();
});


$(document).on("scroll", function () {
	setVisibility();
});

function setVisibility() {
  var pageTop = $(document).scrollTop()
  var pageBottom = pageTop + $(window).height()
  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")
    }
  }
}
section {
  opacity: 0;
  transform: translate(0, 20px); 
  transition: all 1s;
  margin-bottom:20px;
}

section.visible {
  opacity: 1;
  transform: translate(0, 0); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>Lorem ipsum dolor sit amet</section>
  
<section>Donec convallis aliquam eros.</section>
  
<section>Morbi ac consectetur enim.</section>
  
<section>Maecenas mattis vestibulum consectetur.</section>
  
<section>Quisque vitae aliquam nisl.</section>
  
<section>Lacinia ut magna vel efficitur.</section>

<section>Vivamus in placerat nibh, eget fringilla arcu.</section>

<section>Mauris id mauris sed odio consequat efficitur</section>

<section>Duis elementum nulla nec mauris suscipit accumsan.</section>

<section>interdum velit id, tempor enim.</section>

<section>Duis iaculis consequat massa.</section>

<section>In vel risus id sem finibus consectetur</section>

推荐阅读