현재 스크롤시 일정 위치에가면 해당 div들이 순서대로 나오게 할려고 열심히 만들고 있는데요. 얼추 원하는대로 나오기는 했는데. 뭔가 작동이 부자연스럽고. 간혹 작동이 오류가 날때가 있네요. 어디를 수정하면 좋을지 코드 좀 봐주시면 감사드리겠습니다.
지금 이 문제 때문에 한 5-7시간 정도 구글 검색하고 별것 다해봤네요.
부디 문제점을 꼭 알려주시면 감사드리겠습니다.
Copy
<!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>
Copy
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;
}
Copy
$(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개 / 댓글 3개
채택된 답변
+20 포인트
유레카56
2018-02-09 (금) 14:02:14
해당 소스로 확인해 보았는데 딱히 어떤 동작을 원하시는지도 잘 모르겠고 오류나 부자연스러운 부분도 어떤 부분인지 잘 모르겠습니다. 일단 콘솔에 에러도 잡히지 않구요. 뭐 딱히 이상한 점이라고 한다면 body 가 두번 닫겨 있다는거? 그부분은 수정 하셔야 겠네요
답변에 대한 댓글 3개
왕초보초보
2018-02-09 (금) 14:10:10
안녕하세요. 우선 코드 봐주셔서 감사드립니다.구현하고 싶은 부분은 $(this).scrollTop() > 300조건에 만족했을때 sky블루가 오른쪽으로 가고 그다음 핑크가 내려오는것이고 false일때 핑크가 먼저 올라가고 그다음 sky블루가 왼쪽으로 제자리로 가는것입니다. 스크롤을 천천히 내리고 하다보면 작동하기는 하는데 한번씩 오작동이 나네요. ㅠㅠ
왕초보초보
2018-02-09 (금) 14:26:31
http://www.dabagirl.co.kr 여기에 가시면 제일 위쪽 LOGIN JOIN US+18000CART 0 ORDERMY PAGE + BOOKMARK 영역이 있습니다. 이부분을 마우스 스크롤 하게되면 홈이라는 버튼이 생성되는데 addClass로는 해결을 했는데 본 사이트에는 움직임이 있어서 animate로 만든것 같아서 구현해볼려고 하는데 잘안됩니다 ㅠㅠ
유레카56
2018-02-09 (금) 15:45:58
animate로 처리 해도 되지만 addClass 는 되셨다고 하니 그렇다면 css 트렌지션으로 적용 하는 방법도 나쁘지 않을것 같은데요
답변을 작성하려면 로그인이 필요합니다.