jquery resize, scroll 함수 관련 질문이있습니다.
본문
$(document).ready(function() {
function chkWidth(){
//scroll head
var width = $(window).width(); //realtime Width Value
var con = $(".head_pac_scroll");
if(width<1009){
con.css("display","none");
}else{
$(window).scroll(function(){ //scroll event
var position = $(window).scrollTop();
if(position >= 151){
con.stop().fadeIn(200);
}else if(position <= 150){
con.stop().fadeOut(100);
}
});
}
}
chkWidth() ;
$(window).resize(chkWidth);
});
원문 스크립트는 이렇게 작성하였습니다.
문제는 if ~ else 문에서 else 문이 한번 실행되면 scroll 함수가 if 일때도 실행이됩니다.ㅜㅜ
어느 부분이 잘못되었는지 찾기가 어려워서 질문올려봅니다..ㅜㅜ
답변 1
스크립트 가 애매합니다.
$(document).ready(function() {
function chkWidth(){
//scroll head
var width = $(window).width(); //realtime Width Value
var con = $(".head_pac_scroll");
if(width<1009){ //width가 1009보다 작으면 감추는것을 알겠으나..
con.css("display","none");
}else{ // width가 1009이상일때는 스크롤이벤트를 타게하려는거 같은데
// 이건 순서가 뒤바뀐것입니다.
// $(window).scroll(function(){ //scroll event
var position = $(window).scrollTop();
if(position >= 151){
con.stop().fadeIn(200);
}else if(position <= 150){
con.stop().fadeOut(100);
}
// });
}
}
chkWidth() ; // 로딩시 호출됩니다.
$(window).resize(chkWidth); // 리사이징시 호출하려는것 같네요.
// 스크롤시에는요...??
// 여기에 스크롤시에 호출될 부분이 선언되어있어야 합니다.
$(window).scroll(chkWidth());
//이렇게 변경해보세요
});
헉 이해하기쉽게 주석까지 달아주시다니 감사합니다!!
그런데 스크롤때 position 의 값이 실시간으로 계속 변경되서 if 안의 내용처럼 position 의 값이 151 이상이면 con 을 보여주고, 그 이하이면 con 을 사라지게 해야하는데, 플래토님께서 작성해주신 스크립트는 scroll 값이 고정적으로 되서 새로고침을 계속 해주어야하는데, 이같은 경우는 어떻게 해결해야하나요..??
@경하귀요밍
제가 손봐드린건
이벤트가 작동하는 시점만 변경한것이라서.
작동되는 형태를 실험해본건 아닙니다.
스크롤이 고정적으로 되는건, 샘플URL을 확인하면서 확인해야할듯 한데요
$(document).ready(function($){
function chkWidth(){
//scroll head
var width = $(window).width(); //realtime Width Value
var con = $(".head_pac_scroll");
console.log(width);
if(width<1009){
$(window).off("scroll"); //scrollevent off
con.css("display","none");
return false;
}else{
$(window).on("scroll",function(e){ //scroll event
var position = $(window).scrollTop();
if(position >= 151){
con.stop().fadeIn(200);
}else if(position <= 150){
con.stop().fadeOut(100);
}
return false;
});
}
}
chkWidth() ;
$(window).resize(chkWidth);
});
이렇게해서 해결했습니다!! 도움주셔서 고맙습니다!
