스크롤 제이쿼리 오류
본문
안녕하세요.
> document.getElementsByClassName("main_menu").style.height = "65px";
이부분에서 계속 오류가 납니다...
<script>
$(document).ready(function(){
if (matchMedia("screen and (max-width: 1024px)").matches) {
window.onscroll = function() {scrollFunction('.main_menu')};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementsByClassName("main_menu").style.height = "65px";
} else {
document.getElementsByClassName("main_menu").style.height = "116px";
}
}
}
})
</script>
.main_menu { width:100%; height:116px; margin:auto; padding-top:10px; position:fixed; left:0; right:0; top:0; z-index:99999; }
아래와 같이 경고창이 뜹니다.
Uncaught TypeError: Cannot set property 'height' of undefined
at scrollFunction (<anonymous>:8:61)
at window.onscroll (<anonymous>:3:32)
무엇이 문제일까요? 해결하려면 어떻게 해야할까요?
ㅜㅜ
답변 1
id와 달리 class는 한 페이지 내에서 여러번 지정할 수 있습니다. 따라서 getElementsByClassName이 가져온 값은 하나가 아니라 배열이 됩니다.
document.getElementsByClassName("main_menu")[0].style.height = "65px";
위와 같이 작성하셔야 하며, 모든 class에 해당 내용을 사용하시려면 반복문을 사용하심이 좋을 듯합니다.
감사합니다! 피드백대로 수정했더니 바로 실행이 됩니다!!
그런데 실행은 잘 되는데 창의 크기가 바뀔때마다 그전 실행된 쿠키가 따라와서 f5를 눌러주어야지만 효과가 실행되는데 이걸 해결하려면 어떻게해야할까요ㅜㅜ?
창의 크기가 바뀔 때마다 해당 함수가 다시 실행되도록 윈도우 리사이징 이벤트를 넣어주시면 될 듯합니다.