반응형 리사이징 이벤트
본문
<script>
$(document).ready(function(){
$(window).resize(function(){
// width값을 가져오기
var width_size = window.outerWidth;
if (width_size <= 800) {
window.onscroll = function() {scrollFunction('.header')};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementsByClassName("main_menu")[0].style.height = "65px";
document.getElementsByClassName("i_call")[0].style.top = "20px";
document.getElementsByClassName("menu-trigger")[0].style.top = "16px";
}
}
} else if (width_size >= 800) {
window.onscroll = function() {scrollFunction('.header')};
function scrollFunction() {
if (document.body.scrollTop < 50 || document.documentElement.scrollTop < 50) {
document.getElementsByClassName("main_menu")[0].style.height = "116px";
document.getElementsByClassName("i_call")[0].style.top = "41px";
document.getElementsByClassName("menu-trigger")[0].style.top = "36px";
}
}
}
});
});
</script>
여기까지 왔는데요.
document.getElementsByClassName("menu-trigger")[0].style.top = "36px"; -> 이부분을
1024보다 커질때에는 -46px으로 설정하고 싶은데 36px로 고정되어버려요...
어떻게 해야할까요ㅜㅜ?
도와주세요...
답변 1
if (width_size <= 800) {
.
.
} else if (width_size >800 && width_size <=1024) {
.
.
} else if (width_size > 1024) {
window.onscroll = function() {scrollFunction('.header')};
function scrollFunction() {
if (document.body.scrollTop < 50 || document.documentElement.scrollTop < 50) {
document.getElementsByClassName("main_menu")[0].style.height = "116px";
document.getElementsByClassName("i_call")[0].style.top = "41px";
document.getElementsByClassName("menu-trigger")[0].style.top = "-46px";
}
}
}
정리는 하셔야 할거 같습니다. ^^
