๐ป์คํฌ๋กค ์์น์ ๋ฐ๋ฅธ ํ๋ก์ธ์ค ๋ฐ ๋ง๋ค๊ธฐ
๊ธฐ๋ณธ ๋ผ๋
์๋ฐ์ผ๋ก ์์ฑํ์ฌ ์คํฌ๋กค์ ํ ์ ์์๋งํผ ๋ณธ๋ฌธ ๋ด์ฉ์ ์ถ๊ฐํ๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex10.html</title>
<style>
#bar{
width: 50%;
height: 7px;
background-color: tomato;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="bar"></div>
<h1>Lorem ipsum dolor sit amet.</h1>
<!-- (p>lorem100)*30 -->
<script src="../asset/js/jquery-1.12.4.js"></script>
</body>
</html>
์ด๋ฒคํธ
DOM์์๋ window.scrollY๋ก ์คํฌ๋กค์ ์์น๋ฅผ ํ์ธํ๋ค.
jQuery์์๋ $(document).scrollTop()๋ก ์คํฌ๋กค์ ์์น๋ฅผ ํ์ธํ๋ค.
์คํฌ๋กค๋ฐ ์์น์ ๋ฐ๋ฅธ ํ๋ก์ธ์ค๋ฐ ํฌ๊ธฐ๋ฅผ ๊ตฌํ๊ธฐ ์ํด ๋์ ๊ด๊ณ๋ฅผ ์ดํด๋ณด๋ฉด, ๋ฌธ์์ ์ธ๋ก ๊ธธ์ด์ ์ต๋ ์์น์ผ ๋, ํ๋ก์ธ์ค๋ฐ์ ํฌ๊ธฐ๊ฐ 100%๊ฐ ๋๋ค.
์ด๊ฒ์ 1์ฐจ ๋ฐฉ์ ์์ผ๋ก ๊ตฌํ๋ฉด ์๋์ ๊ฐ์ ์์ด ๋์จ๋ค.
์คํฌ๋กค๋ฐ ์ต๋ ์์น : 100% = ์คํฌ๋กค๋ฐ ์์น : x
let x = $(document).scrollTop() * 100 / ($(document).outerHeight()-$(window).outerHeight());x์ ๊ฐ์ ๊ตฌํ์ฌ bar์ ๋๋น๋ก ์ง์ ํ๋ค.
<script>
$(document).scroll(function() {
// console.log($(document).scrollTop());
let x = $(document).scrollTop() * 100 / ($(document).outerHeight()-$(window).outerHeight());
$('#bar').css('width', x+'%');
});
</script>
'WEB > jQuery' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| jQuery๋ก CSS ์กฐ์ (0) | 2023.10.16 |
|---|---|
| [jQuery] jQuery ์ด๋ฒคํธ ํจ์ (0) | 2023.10.13 |
| [jQuery] jQuery ํจ์ (0) | 2023.10.13 |
| [jQuery] jQuery ์ค์น (0) | 2023.10.13 |
