스크롤시 나오는 영역이요~ 채택완료
Copy
$(document).ready(function () {
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? true : false;
if(!isMobile) {
//모바일이 아닌 경우 스크립트
$(window).scroll(function(){
var btn_guide_offset = $("#sit_rel").offset();
var btn_guide_height = btn_guide_offset.top;
var list_btn_height = $("#right__wrap").height();
var bottom_size = btn_guide_height - list_btn_height + 120;
if(bottom_size $(this).scrollTop()) {
$("#right__wrap").removeClass("fixed");
}else{
$("#right__wrap").addClass("fixed");
}
if(190 $(this).scrollTop() && bottom_size > $(this).scrollTop()) {
$("#right__wrap").addClass("fixed");
}else{
$("#right__wrap").removeClass("fixed");
}
});
} else {
//모바일인 경우 스크립트
$(function(){
var stickyHeaderTop = $('#sit_ov_btn').offset().top+$('#sit_ov').height()/1;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#sit_ov').addClass("fixed");
$('#sit_ov').removeClass("static");
$('.gg').height();
} else {
$('#sit_ov').removeClass("fixed");
$('#sit_ov').addClass("static");
}
});
$('.op_btn').click(function() {
$('.scroll_show').toggle();
});
$(".sit_ov_height").css('height', $("#sit_ov").height());
});
}
});
모바일 접속 시 나오는 스크립트가
스크롤 하면 나오면서 붙는 스크립트인데요
스크롤을 많이 내려야만 나오거든요
스크롤 없이 바로 나오게 할려면 멀 고쳐야할까요?
디자이너에요~
답변 2개
채택된 답변
+20 포인트
2년 전
다음과 같은 방법도 있으니 참고해서 적용해 보세요
스크롤 없이 바로 나타나게 하려면 $(window).scrollTop()의 값을 비교하는 조건을 수정하면 됩니다.
예를 들어, 현재 stickyHeaderTop에서 50px 정도 더 빠르게 나타나도록 조정하려면 $(window).scrollTop() > stickyHeaderTop - 50로 수정하면 됩니다.
Copy
$(function () {
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? true : false;
if (!isMobile) {
// 모바일이 아닌 경우 스크립트
$(window).scroll(function () {
var btn_guide_offset = $("#sit_rel").offset();
var btn_guide_height = btn_guide_offset.top;
var list_btn_height = $("#right__wrap").height();
var bottom_size = btn_guide_height - list_btn_height + 120;
if (bottom_size $(this).scrollTop()) {
$("#right__wrap").removeClass("fixed");
} else {
$("#right__wrap").addClass("fixed");
}
if (190 $(this).scrollTop() && bottom_size > $(this).scrollTop()) {
$("#right__wrap").addClass("fixed");
} else {
$("#right__wrap").removeClass("fixed");
}
});
} else {
// 모바일인 경우 스크립트
$(function () {
var stickyHeaderTop = $('#sit_ov_btn').offset().top + $('#sit_ov').height() / 1;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop - 50) {
$('#sit_ov').addClass("fixed");
$('#sit_ov').removeClass("static");
$('.gg').height();
} else {
$('#sit_ov').removeClass("fixed");
$('#sit_ov').addClass("static");
}
});
$('.op_btn').click(function () {
$('.scroll_show').toggle();
});
$(".sit_ov_height").css('height', $("#sit_ov").height());
});
}
});
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
Min아빠
2년 전
Copy
$('#sit_ov').addClass("fixed");
$('#sit_ov').removeClass("static");
이 2개 스크립트를 바로 실행하시면 될듯 합니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
홀로그램웹
2년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
저 위 소스와 같이 부탁드릴게요 ㅠㅠ 디자이너라서 아무것도 몰라요 ㅠㅠ