제이쿼리 질문드립니다. 제발 부탁드립니다 ㅠㅠ

제이쿼리 질문드립니다. 제발 부탁드립니다 ㅠㅠ

QA

제이쿼리 질문드립니다. 제발 부탁드립니다 ㅠㅠ

본문

현재 스크롤시 일정 위치에가면 해당 div들이 순서대로 나오게 할려고 열심히 만들고 있는데요. 얼추 원하는대로 나오기는 했는데. 뭔가 작동이 부자연스럽고. 간혹 작동이 오류가 날때가 있네요. 어디를 수정하면 좋을지 코드 좀 봐주시면 감사드리겠습니다.

 

지금 이 문제 때문에 한 5-7시간 정도 구글 검색하고 별것 다해봤네요.

부디 문제점을 꼭 알려주시면 감사드리겠습니다.

 

 


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper.css"> -->
    
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/time.js"></script>
    <!-- <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/swiper.esm.js"></script>
    <script type="text/javascript" src="js/swiper.esm.bundle.js"></script> -->
    <title></title>
</head>
<body>
<div id="wrap">
    <div id="a">
        
    </div>
    <div id="b">
        
    </div>
</div>
</body>
</body>
</html>

 


body{
    margin: 0;
    padding: 0;
}
#wrap {
    position: relative;
    width: 100%;
    height: 2000px;
    background: gold;
    
}
ul,li {
    margin: 0;
    padding: 0;
}

#a {
    position: fixed;
    width: 200px;
    height: 50px;
    background: pink;
    float: left;
    top: -50px;
    z-index: 20;
}
#b {
    position: fixed;
    width: 400px;
    height: 50px;
    background: skyblue;
    float: left;
    left: 0px;
    z-index: 10;
}

 

 


$(document).ready(function() {
    $(window).scroll(function(){
        
        // var scroll = $(document).scrollTop();
        var a = $('#a')
        var b = $('#b')
        if ($(this).scrollTop() > 300){
            $(b).stop().animate({ "left": "+200" }, 200, function () { 
            $(a).stop().animate({ "top": "0" }, 200); 
                }); 
            // $(b).stop().animate({"left":"+200"},500);
            // $(a).stop().animate({"top":"0"},500);
                                
        }
        else {
            
                $(a).stop().animate({ "top": "-50" }, 200, function () { 
                $(b).stop().animate({ "left": "0" }, 200); 
             }); 
            // $(a).stop().animate({"top":"-50"},500);
            // $(b).stop().animate({"left":"0"},500);
            
            
            }
    });
});

이 질문에 댓글 쓰기 :

답변 1

해당 소스로 확인해 보았는데 딱히 어떤 동작을 원하시는지도 잘 모르겠고 오류나 부자연스러운 부분도 어떤 부분인지 잘 모르겠습니다. 일단 콘솔에 에러도 잡히지 않구요. 뭐 딱히 이상한 점이라고 한다면 body 가 두번 닫겨 있다는거? 그부분은 수정 하셔야 겠네요

안녕하세요. 우선 코드 봐주셔서 감사드립니다.구현하고 싶은 부분은 $(this).scrollTop() > 300조건에 만족했을때 sky블루가 오른쪽으로 가고 그다음 핑크가 내려오는것이고 false일때 핑크가 먼저 올라가고 그다음 sky블루가 왼쪽으로 제자리로 가는것입니다. 스크롤을 천천히 내리고 하다보면 작동하기는 하는데 한번씩 오작동이 나네요. ㅠㅠ

http://www.dabagirl.co.kr  여기에 가시면 제일 위쪽 LOGIN JOIN US+18000CART 0 ORDERMY PAGE + BOOKMARK 영역이 있습니다. 이부분을 마우스 스크롤 하게되면 홈이라는 버튼이 생성되는데 addClass로는 해결을 했는데 본 사이트에는 움직임이 있어서 animate로 만든것 같아서 구현해볼려고 하는데 잘안됩니다 ㅠㅠ

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

회원로그인

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