javascript 当用户在一个粘滞定位的div上滚动时，动画显示文本

31moq8wy 于 2023-08-02 发布在 Java

关注(0)|答案(2)|浏览(94)

bounty还有4天到期。回答此问题可获得+50声望奖励。Álvaro正在寻找一个规范答案。

我正试图动画四个标题作为用户滚动。首先，我创建了一个sticky定位的div，然后用户在标题上滚动，一次切换一个类.active，让最后一个可见，并继续滚动到最后一个div。
我遇到的问题是，一旦.sticky div变得粘滞，浏览器就不再检测到进一步的滚动，直到div再次变得非粘滞。

更新
我已经改变了代码顺序过渡和工作更好，但我想启动动画只有当.sticky div变得粘滞，但我尝试了，滚动动画完全停止工作。此外，我想保持在同一块上的所有标题，但如果我对他们做position: absolute它打破了动画太。

const headings = Array.from(document.querySelectorAll('.animated-text'));
const sticky = document.querySelector('.sticky');

let currentActive = null;

window.addEventListener('scroll', () => {
  const viewportHeight = window.innerHeight;
  headings.forEach((heading, index) => {
    const headingRect = heading.getBoundingClientRect();

    if (headingRect.top <= viewportHeight / 2) {
      if (currentActive) {
        currentActive.classList.remove('active');
      }
      heading.classList.add('active');
      currentActive = heading;
    }
  });
});

body {
  margin: 0
}

section {
  position: relative;
}

.sticky {
  padding-bottom: 150px;
  background: #2d232c;
  position: sticky;
  top: 0;
  overflow: hidden;
  height: auto;
  color: white;
}

.animated-text {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 1s ease, height 1s ease, transform 1s ease;
  transform: translateY(0);
}

.animated-text.active {
  height: auto;
  opacity: 1;
  transform: translateY(-20px);
}

.hero, .end {
  height: 100px;
  background: white;
}

<section class='hero'>
  <p>Start</p>
</section>

<section class='sticky'>
  <div class='text-animations'>
    <h1 class='animated-text active'>Intro</h1>
    <h2 class='animated-text'>First</h2>
    <h2 class='animated-text'>Second</h2>
    <h2 class='animated-text'>Third</h2>
  </div>
  <p class='intro_content'>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </p>  
</section>

<section class='end'>
  <p>End<p>
</section>

JavaScript

来源：https://stackoverflow.com/questions/76779949/animate-text-as-the-user-scrolls-over-a-sticky-positioned-div

2条答案

按热度按时间

pcrecxhr1#

当用户滚动时，粘性div出现在视图中，这看起来就像是在尝试为标题创建动画效果。但是，当前代码只处理一次scroll事件，并且在.sticky div变为sticky之后，滚动不会继续。
为了实现在用户滚动时逐个切换标题的“活动”类的预期效果，您需要不断检查滚动位置并相应地更新活动标题。您可以通过使用getBoundingClientRect（）方法来确定标题相对于视口的位置来实现这一点。

const headings = document.querySelectorAll('.animated-text');
const sticky = document.querySelector('.sticky');

window.addEventListener('scroll', () => {
  const stickyRect = sticky.getBoundingClientRect();

  headings.forEach((heading, index) => {
    const headingRect = heading.getBoundingClientRect();

    // Check if the heading is inside the sticky div and has come into view
    if (headingRect.top >= stickyRect.top && headingRect.bottom <= stickyRect.bottom) {
      // Add 'active' class to the current heading and remove it from the others
      heading.classList.add('active');
      for (let i = 0; i < headings.length; i++) {
        if (i !== index) {
          headings[i].classList.remove('active');
        }
      }
    }
  });
});

body {
  margin: 0;
}
section {
  position: relative;
}
.sticky {
  padding-bottom: 150px;
  background: #2d232c;
  position: sticky;
  top: 0;
  overflow: hidden;
  height: auto;
  color: white;
}
.animated-text {
  opacity: 0;
  max-height: 0;
  transition: opacity 1s ease, max-height 1s ease;
}
.animated-text.active {
  max-height: 1000px;
  opacity: 1;   
}
.hero, .end {
  height: 100px;
  background: white;
}

<!DOCTYPE html>
<html>
<head>
  <title>Scroll Animation</title>
 
</head>
<body>
  <section class='hero'>
    <p>Hero space</p>
  </section>

  <section class='sticky'>
    <div class='text-animations'>
      <h1 class='animated-text active'>Intro</h1>
      <h2 class='h1 animated-text'>First</h2>
      <h2 class='h1 animated-text'>Second</h2>
      <h2 class='h1 animated-text'>Third</h2>
      <h3 class='intro_content'>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
      </h3>
    </div>      
  </section>

  <section class='end'>
    <p>Ends<p>
  </section>

使用此更新的代码，当用户滚动并且.sticky div变得粘滞时，浏览器将继续检测进一步的滚动并相应地更新标题的“活动”类，从而逐个为标题提供所需的动画效果。

赞(0）回复(0）举报 2023-08-02

bfrts1fy2#

根据将所有标题置于顶部的要求，添加

position:absolute; 
top:0;

字符串
在.active类中解决了这个问题。
并且为了仅在div变为粘滞时启动动画，需要比较stickyDiv位置，然后应实现动画逻辑。
我试图把逻辑的基础上滚动向上或向下事件的标题过渡太，使标题过渡正确的顺序，无论滚动方向。我知道代码需要大量的重构，但我希望它能按照要求工作。

let headings = Array.from(document.querySelectorAll('.animated-text'));
const sticky = document.querySelector('.sticky');
let lastScrollTop = 0;
let currentActive=0;
window.addEventListener('scroll', () => {
  const stickyDiv=sticky.getBoundingClientRect(); 
  let st = window.pageYOffset || document.documentElement.scrollTop; 
  if (st > lastScrollTop) {
     if (stickyDiv.top===0) {
     for(let i=currentActive;i<headings.length-1;i++)
        {
         const headingRect = headings[i].getBoundingClientRect();
         if(headingRect.top<=0){
                currentActive=i+1;
                headings[i].classList.remove('active');
                headings[i+1].classList.add('active');
         }
     }
  }
} else if (st < lastScrollTop) {
    if (stickyDiv.top===0) {
    for(let i=currentActive;i>0;i--)
    {
     const headingRect = headings[i].getBoundingClientRect();
     if(headingRect.top<=0){
            currentActive=i-1;
            headings[i].classList.remove('active');
            headings[i-1].classList.add('active');
     }
   }
  } }
  if(stickyDiv.top>0){
        headings[currentActive].classList.remove('active');
        currentActive=0;
        headings[0].classList.add('active');
  }
   lastScrollTop = st <= 0 ? 0 : st; 
   });

型
完整的代码片段如下：

let headings = Array.from(document.querySelectorAll('.animated-text'));
const sticky = document.querySelector('.sticky');
let lastScrollTop = 0;
let currentActive=0;
window.addEventListener('scroll', () => {
  const stickyDiv=sticky.getBoundingClientRect(); 
  let st = window.pageYOffset || document.documentElement.scrollTop; 
  if (st > lastScrollTop) {
     if (stickyDiv.top===0) {
     for(let i=currentActive;i<headings.length-1;i++)
        {
         const headingRect = headings[i].getBoundingClientRect();
         if(headingRect.top<=0){
                currentActive=i+1;
                headings[i].classList.remove('active');
                headings[i+1].classList.add('active');
         }
     }
  }
} else if (st < lastScrollTop) {
    if (stickyDiv.top===0) {
    for(let i=currentActive;i>0;i--)
    {
     const headingRect = headings[i].getBoundingClientRect();
     if(headingRect.top<=0){
            currentActive=i-1;
            headings[i].classList.remove('active');
            headings[i-1].classList.add('active');
     }
   }
  } }
  if(stickyDiv.top>0){
        headings[currentActive].classList.remove('active');
        currentActive=0;
        headings[0].classList.add('active');
  }
   lastScrollTop = st <= 0 ? 0 : st; 
   });

body {
  margin: 0
}

section {
  position: relative;
}

.sticky {
  padding-bottom: 150px;
  background: #2d232c;
  position: sticky;
  top: 0;
  overflow: hidden;
  height: auto;
  color: white;
}

.animated-text {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 1s ease, height 1s ease, transform 1s ease;
  transform: translateY(0);
}

.animated-text.active {
  position:absolute;
  top:0;
  height: auto;
  opacity: 1;
  transform: translateY(-20px);
}

.hero, .end {
  height: 100px;
  background: white;
}

<section class='hero'>
  <p>Start</p>
</section>

<section class='sticky'>
  <div class='text-animations'>
    <h1 class='animated-text active'>Intro</h1>
    <h2 class='animated-text'>First</h2>
    <h2 class='animated-text'>Second</h2>
    <h2 class='animated-text'>Third</h2>
  </div>
  <p class='intro_content'>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </p>  
</section>

<section class='end'>
  <p>End<p>
</section>

的一种或多种
如果有任何逻辑不清楚或需要澄清，请随时询问。

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 当用户在一个粘滞定位的div上滚动时，动画显示文本

2条答案

相关问题

热门标签

最新问答