A버튼은 붕떠있고 하단에 B버튼이있다.
스크롤시 겹치는순간이후부터 A버튼이 사라지는 코드를 구현하였다.
스크롤이벤트안에 스크롤높이를 감지할수있는 window.scrollY와
B버튼의 위치(offsetTop)을 사용하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
height: 200vh;
margin: 0;
}
.button {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
}
#buttonB {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
}
</style>
<title>Scroll Button Example</title>
</head>
<body>
<button class="button" id="buttonA">A 버튼</button>
<div style="height: 50vh;"></div>
<button class="" id="buttonB">B 버튼</button>
<script>
const buttonA = document.getElementById('buttonA');
const buttonB = document.getElementById('buttonB');
window.addEventListener('scroll', function () {
const scrollPosition = window.scrollY;
// B버튼이 보이고 있는 위치
const buttonBRange = buttonB.offsetTop
console.log(scrollPosition, buttonBRange)
if (scrollPosition >= buttonBRange) {
buttonA.style.display = 'none';
} else {
buttonA.style.display = 'block';
}
});
</script>
</body>
</html>반응형
'Frontend > 모던자바스크립트' 카테고리의 다른 글
| [Javascript] if문 대신 !! 또는 Boolean() 사용하기 (0) | 2023.09.24 |
|---|---|
| [Javascript] 아이패드도 웹으로 인식할때 (0) | 2023.09.22 |
| 이벤트 객체 모방하기 {target : e} (0) | 2023.08.25 |
| 자바스크립트 스프레드 연산자 (0) | 2023.07.25 |
| [리팩토링] if문 대신 매핑하기 (0) | 2023.07.07 |
