jquery resize, scroll 함수 관련 질문이있습니다. 채택완료
</p>
<p>$(document).ready(function() {
function chkWidth(){
//scroll head
var width = $(window).width(); //realtime Width Value
var con = $(".head_pac_scroll");</p>
<p> 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);
}</p>
<p> });
}
}</p>
<p> chkWidth() ;</p>
<p> $(window).resize(chkWidth);
});</p>
<p>원문 스크립트는 이렇게 작성하였습니다.
문제는 if ~ else 문에서 else 문이 한번 실행되면 scroll 함수가 if 일때도 실행이됩니다.ㅜㅜ
어느 부분이 잘못되었는지 찾기가 어려워서 질문올려봅니다..ㅜㅜ
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
8년 전
스크립트 가 애매합니다.
</p>
<p>$(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이상일때는 스크롤이벤트를 타게하려는거 같은데
// 이건 순서가 뒤바뀐것입니다.</p>
<p>
// $(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); // 리사이징시 호출하려는것 같네요.</p>
<p> // 스크롤시에는요...??</p>
<p> // 여기에 스크롤시에 호출될 부분이 선언되어있어야 합니다.</p>
<p> $(window).scroll(chkWidth());</p>
<p>//이렇게 변경해보세요
});</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
경하귀요밍
8년 전
�
8년 전
@경하귀요밍
제가 손봐드린건
이벤트가 작동하는 시점만 변경한것이라서.
작동되는 형태를 실험해본건 아닙니다.
스크롤이 고정적으로 되는건, 샘플URL을 확인하면서 확인해야할듯 한데요
제가 손봐드린건
이벤트가 작동하는 시점만 변경한것이라서.
작동되는 형태를 실험해본건 아닙니다.
스크롤이 고정적으로 되는건, 샘플URL을 확인하면서 확인해야할듯 한데요
�
경하귀요밍
8년 전
$(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 값이 고정적으로 되서 새로고침을 계속 해주어야하는데, 이같은 경우는 어떻게 해결해야하나요..??