...

์คํฌ๋กค ๋ด๋ ค์ ํน์ ์์ญ ๊ฐ์งํ๊ธฐ
์ ์ด์ฟผ๋ฆฌ๋ฅผ ์ด์ฉํด ์คํฌ๋กค์ ๋ด๋ฆฌ๋ฉด ์ด๋ฅผ ๊ฐ์งํด์ ์ด๋ฒคํธ๋ฅผ ํ๋ฒ ๋ฐ์์ํค๋ ์คํฌ๋ฆฝํธ์ด๋ค.
<div id="first">
์คํฌ๋กค ๋ด๋ ค์ ํ๋ ์์ญ์ด ๋์ฌ๋๊น์ง ๋ด๋ ค๋ณด์ธ์
</div>
<!-- ... ๊ทธ ์ธ์ ์์๋ค -->
<div id="second"></div>
function checkVisible( element, check = 'above' ) {
const viewportHeight = $(window).height(); // Viewport Height
const scrolltop = $(window).scrollTop(); // Scroll Top
const y = $(element).offset().top;
const elementHeight = $(element).height();
// ๋ฐ๋์ ์์๊ฐ ํ๋ฉด์ ๋ณด์ฌ์ผ ํ ๊ฒฝ์ฐ
if (check == "visible")
return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
// ํ๋ฉด์ ์๋ณด์ฌ๋ ์์๊ฐ ์์๋ง ์์ผ๋ฉด (ํ์ด์ง๋ฅผ ๋ก๋ํ ๋ ์คํฌ๋กค์ด ๋ฐ์ผ๋ก ๋ด๋ ค๊ฐ ์์๋ฅผ ์ง๋์ณ ๋ฒ๋ฆด๊ฒฝ์ฐ)
if (check == "above")
return ((y < (viewportHeight + scrolltop)));
}
// ๋ฆฌ์์ค๊ฐ ๋ก๋ ๋๋ฉด ํจ์ ์คํ์ ๋ฉ์ถ์ง ๋ง์ง ์ ํ๋ ๋ณ์
let isVisible = false;
// ์ด๋ฒคํธ์ ๋ฑ๋กํ ํจ์
const func = function () {
if ( !isVisible && checkVisible('#second') ) {
alert("์๋ฆฌ๋จผํธ ๋ณด์ !!");
isVisible = true;
}
// ๋ง์ผ ๋ฆฌ์์ค๊ฐ ๋ก๋๊ฐ ๋๋ฉด ๋์ด์ ์ด๋ฒคํธ ์คํฌ๋ฆฝํธ๊ฐ ์์ ํ์๊ฐ ์์ผ๋ ์ญ์
isVisible && window.removeEventListener('scroll', func);
}
// ์คํฌ๋กค ์ด๋ฒคํธ ๋ฑ๋ก
window.addEventListener('scroll', func);
์ธ์ฉํ ๋ถ๋ถ์ ์์ด ๋ง์ผ ๋๋ฝ๋ ์ถ์ฒ๊ฐ ์๋ค๋ฉด ๋ฐ๋์ ์๋ ค์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค
์ด ๊ธ์ด ์ข์ผ์ จ๋ค๋ฉด ๊ตฌ๋ & ์ข์์
์ฌ๋ฌ๋ถ์ ๊ตฌ๋
๊ณผ ์ข์์๋
์ ์์๊ฒ ํฐ ํ์ด ๋ฉ๋๋ค.