채택완료
jquery resize, scroll 함수 관련 질문이있습니다.
Copy
$(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개 / 댓글 3개
채택된 답변
+20 포인트
스크립트 가 애매합니다.
Copy
$(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());
//이렇게 변경해보세요
});답변에 대한 댓글 3개
$(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);
});
이렇게해서 해결했습니다!! 도움주셔서 고맙습니다!
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);
});
이렇게해서 해결했습니다!! 도움주셔서 고맙습니다!
답변을 작성하려면 로그인이 필요합니다.
그런데 스크롤때 position 의 값이 실시간으로 계속 변경되서 if 안의 내용처럼 position 의 값이 151 이상이면 con 을 보여주고, 그 이하이면 con 을 사라지게 해야하는데, 플래토님께서 작성해주신 스크립트는 scroll 값이 고정적으로 되서 새로고침을 계속 해주어야하는데, 이같은 경우는 어떻게 해결해야하나요..??