SMALL
/// 스크롤이벤트
window --> scroll
window.addEventListener('scroll',function() {
실행코드;
});
<style>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
header {
width: 100%;
height: 150px;
background-color: rgba(0,0,0,.5);
font-size: 70px;
text-align: center;
position: fixed;
left:0; top:0;
}
header.active {
background-color: #f00;
}
main {
width: 1000px;
height: 3000px;
background-color: #fc0;
font-size: 300px;
text-align: center;
margin: 0 auto;
}
header.active {
background-color: #f00;
}
</style>
</head>
<body>
<header>Header</header>
<main>Main</main>
<script>
const header = document.querySelector('header');
window.addEventListener('scroll',function(){
console.log('스크롤중입니다');
// 스크롤바의 위치값
// 스크롤을 하지 않았을때 스크롤바 위치값은 0부터시작
// 스크롤바의 위치값이 특정값보다 클때 --> if문
// header의 배경색을 바꾸기 --> 클래스로 제저
// 현재 창의 스크롤바 위치값 가져오기
// window.pageYOffset
console.log(window.pageYOffset);
if ( window.pageYOffset > 1 ) {
// 스크롤바의 위치값이 1보다 클때
header.classList.add('active')
} else {
// 스크롤바의 위치값이 1보다 작을때
header.classList.remove('active');
}
});
</script>
</body>
LIST
'프론트엔드 개발자 > JS' 카테고리의 다른 글
| 자바스크립트 javascript 7. 서브메뉴만들기 1 (0) | 2023.04.04 |
|---|---|
| 자바스크립트 javascript 6 .DOM요소 클래스 제어하기 (0) | 2023.04.04 |
| 자바스크립트 javascript 4. forEach (0) | 2023.03.31 |
| 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(3) 이벤트사용하기 (0) | 2023.03.31 |
| 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(2) 이벤트사용하기 (0) | 2023.03.31 |
댓글