클릭할때마다 위치이동하게 하고싶습니다.
본문
<script>
$(document).ready(function() {
var lastScrollTop = 0, delta = 15;
$(window).scroll(function(){
var scrollTop = $(this).scrollTop() /* 스크롤바 수직 위치를 가져옵니다, 괄호 안에 값(value)이 있을 경우 스크롤바의 수직 위치를 정합니다. */
// Math.abs: 주어진 숫자의 절대값을 반환(return)합니다.
if(Math.abs(lastScrollTop - scrollTop) <= delta) // 스크롤 값을 받아서 ~
return; // ~ 리턴
if ((scrollTop > lastScrollTop) && (lastScrollTop>0)) {
/* 화면에 나오지 않을 때, top값은 요소가 보이지 않을 정도로 사용해야함 */
$(".head_mob").css("display","none");
$(".head_mob").css("bottom","-160px");
$(".head_mob_btn").css("bottom","0");
} else {
$(".head_mob").css("display","block");
$(".head_mob").css("bottom","0");
$(".head_mob_btn").css("bottom","130px");
}
lastScrollTop = scrollTop;
});
if($('.head_mob').css("bottom" , "-160px")) {
$('.head_mob_btn').click(function() {
$('.head_mob').css("bottom" , "0");
$(".head_mob").css("display","block");
$('.head_mob_btn').css("bottom" , "130px");
});
} else if($('.head_mob').css("bottom" , "0")) {
$('.head_mob_btn').click(function(){
$('.head_mob').css("bottom" , "-160px");
$(".head_mob").css("display","none");
$('.head_mob_btn').css("bottom" , "0");
});
}
});
</script>
<style>
body {height: 2000px;}
.head_mob {
display: none;
position: fixed;
left: 0;
bottom: -160px;
width: 100%;
height: 160px;
background: #fff;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
padding: 30px 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.head_mob_btn {
display: block;
position: fixed;
bottom: 0;
right: 10px;
width: 75px;
height: 42px;
background: #7287ea;
border-radius: 28px;
cursor: pointer;
z-index: 50;
background: Red;
}
</style>
<div class="head_mob_btn"></div>
<div class="head_mob"></div>
스크롤을 내리면 메뉴랑 버튼이 내려가고 스크롤을 올리면 메[뉴랑 버튼이 올라가는데
버튼을 클릭할때도 메뉴이동을 제어하고싶은데 제가 if문을 써서 했는데
메뉴가 내려갈땐 이동이되는데 메뉴가 올라와있을땐 버튼을 클릭해도 움직이지가 않네요
어떻게해야 둘다 가능하게 제어하는지 스크립트 부탁드립니다 ㅠㅠㅠ
답변 1
$(window).scroll로 스크롤 이벤트를 연결하셨듯이
버튼 클릭에 대한것도 이벤트를 연결해주셔야 합니다.
지금 if문 안에 작상하셨는데 $(document).ready(function() 는 최초 한번만 실행되는 함수 입니다.
첫 실행일때 안에 있는 if와 else if 둘 중에 하나에라도 들어간다면 버튼 클릭에 대한 이벤트는 하나 등록되었을거 같네요.
저 같으면 아래와 같이 하나 등록해놓을거 같아요
$('.head_mob_btn').click(function(){
if(조건){
$('.head_mob').css("bottom" , "0");
$(".head_mob").css("display","block");
$('.head_mob_btn').css("bottom" , "130px");
}
else{
$('.head_mob').css("bottom" , "-160px");
$(".head_mob").css("display","none");
$('.head_mob_btn').css("bottom" , "0");
}
});
답변을 작성하시기 전에 로그인 해주세요.
