클릭할때마다 위치이동하게 하고싶습니다.

클릭할때마다 위치이동하게 하고싶습니다.

QA

클릭할때마다 위치이동하게 하고싶습니다.

본문


<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");
                }


            });

 

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT