Question

我使用的是原始JavaScript，想找出隐藏div容器的方法，但是当用户滚动到div容器的50％时，就是div完全可见。有点像淡入淡出效果。这是我到目前为止所拥有的：

// delays scroll affects
function debounce(func, wait = 20, immediate = true) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

// adds animation for section cards 
function cardActive(e) {
  const cards = document.querySelectorAll('.slide-in');
  // checks if image is half shown from bottom
  cards.forEach(card => {
    const slideInAt = (window.scrollY + window.innerHeight) - card.height / 2;
    if (slideInAt > card.offsetTop) {
      card.classList.add('active')
    } else {
      card.classList.remove('active');
    }
  })
};

window.addEventListener('scroll', debounce(cardActive));

.slide-in {
  opacity: 50%;
  transition: opacity 0.8s;
}

.slide-in.active {
  transition: opacity 0.8s;
  opacity: 100%;
  visibility: visible !important;
}

.placeholder {
  margin-top: 400px;
}

.icon {
  width: 100px;
}

<div class="placeholder"></div>

<div class="mission-1 slide-in">
  <div class="section-card">
    <img class="icon" src="https://image.flaticon.com/icons/svg/869/869767.svg" alt="icon">
    <h6 class="mission-card-title">Title 1</h6>
    <p class="p-special">Lorem Ipsum.</p>
  </div>
</div>

<div class="placeholder"></div>

Answer 1

您需要进行两个小更改：

您需要在JS文件中将card.height替换为card.offsetHeight。

在CSS文件中使用transition，不需要动画来产生淡入效果：

.slide-in {
   opacity: 0%;
   transition: opacity 0.8s;
}

.active {
   transition: opacity 0.8s;
   opacity: 100%;
   visibility: visible !important;
}

Answer 2

这里的图像已经显示为不透明度1，然后在其上滚动即可使用JS淡出。

// adds animation for section cards 
window.addEventListener('scroll', (e) => {
  last_known_scroll_position = window.scrollY;
  let img = document.getElementById("img-1"); 
  if(img.offsetTop < last_known_scroll_position){
    img.style.opacity= 0.1;
  }else{
    img.style.opacity= 1;
  }

});

.slide-in {
  opacity: 50%;
}

.slide-in.active {
    opacity: 100%;
    -webkit-animation: animat_show 0.8s;
    animation: animat_show 0.8s;
    visibility: visible !important;
  }

.lorem {
  margin-bottom: 500px;
}

img {
  width: 500px;
}

<section class="space">
  <p class="lorem">lorem ipsum</p>
  <div class="slide-in">
    <img class="img-1" id="img-1" src="https://image.flaticon.com/icons/svg/869/869767.svg" alt="confetti">
  </div>
  <p class="lorem">lorem ipsum</p>
</section>

使用香草JavaScript滚动时显示div

2 个答案: