jQuery에서 특정 요소로 스크롤할 때 이벤트를 트리거하는 방법은 무엇입니까?

jQuery를 사용하여 특정 요소에 도달할 때 이벤트 트리거

문제

사용자가 웹페이지를 아래로 스크롤하여 해당 요소에 도달할 때 경고 메시지를 표시하려고 합니다. 특정 h1 요소. 그들은 scroll() 이벤트를 사용하려고 시도했지만 작동하지 않았습니다.

해결책

h1 요소가 브라우저 보기에 언제 들어가는지 결정하려면 상단으로부터의 오프셋을 계산하고 비교해야 합니다. 현재 스크롤 값으로 표시됩니다. 수정된 코드는 다음과 같습니다.

<code class="javascript">$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH) && wS < hT && wS+wH > hT+hH){
       console.log('H1 on the view!'); // or trigger any desired event
   }
});</code>

Enhancements

• Demo Fiddle: 경고가 없고 대신 h1 요소가 희미해지는 라이브 예제
• 업데이트된 코드: 이제 스크롤 방향에 관계없이 요소가 뷰포트 내에 있는지 확인합니다.
• 업데이트된 데모 바이올린: 업데이트된 코드의 기능을 표시합니다. .

위 내용은 jQuery에서 특정 요소로 스크롤할 때 이벤트를 트리거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!