제이쿼리 질문드립니다. 제발 부탁드립니다 ㅠㅠ 채택완료
왕초보초보
7년 전
조회 2,130
현재 스크롤시 일정 위치에가면 해당 div들이 순서대로 나오게 할려고 열심히 만들고 있는데요. 얼추 원하는대로 나오기는 했는데. 뭔가 작동이 부자연스럽고. 간혹 작동이 오류가 날때가 있네요. 어디를 수정하면 좋을지 코드 좀 봐주시면 감사드리겠습니다.
지금 이 문제 때문에 한 5-7시간 정도 구글 검색하고 별것 다해봤네요.
부디 문제점을 꼭 알려주시면 감사드리겠습니다.
</p>
<p><!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></p>
<p></div></p>
<p></body>
</body>
</html></p>
<p>
</p>
<p>body{
margin: 0;
padding: 0;
}
#wrap {
position: relative;
width: 100%;
height: 2000px;
background: gold;</p>
<p>
}</p>
<p>ul,li {
margin: 0;
padding: 0;
}</p>
<p>
#a {
position: fixed;
width: 200px;
height: 50px;
background: pink;
float: left;
top: -50px;
z-index: 20;</p>
<p>}</p>
<p>#b {
position: fixed;
width: 400px;
height: 50px;
background: skyblue;
float: left;
left: 0px;
z-index: 10;
}</p>
<p>
</p>
<p>$(document).ready(function() {
$(window).scroll(function(){
// var scroll = $(document).scrollTop();</p>
<p> var a = $('#a')
var b = $('#b')
if ($(this).scrollTop() > 300){</p>
<p> $(b).stop().animate({ "left": "+200" }, 200, function () {
$(a).stop().animate({ "top": "0" }, 200);
}); </p>
<p> // $(b).stop().animate({"left":"+200"},500);
// $(a).stop().animate({"top":"0"},500);
}
else {
</p>
<p> $(a).stop().animate({ "top": "-50" }, 200, function () {
$(b).stop().animate({ "left": "0" }, 200);
}); </p>
<p> // $(a).stop().animate({"top":"-50"},500);
// $(b).stop().animate({"left":"0"},500);
}</p>
<p> });
});</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
7년 전
해당 소스로 확인해 보았는데 딱히 어떤 동작을 원하시는지도 잘 모르겠고 오류나 부자연스러운 부분도 어떤 부분인지 잘 모르겠습니다. 일단 콘솔에 에러도 잡히지 않구요. 뭐 딱히 이상한 점이라고 한다면 body 가 두번 닫겨 있다는거? 그부분은 수정 하셔야 겠네요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
왕초보초보
7년 전
안녕하세요. 우선 코드 봐주셔서 감사드립니다.구현하고 싶은 부분은 $(this).scrollTop() > 300조건에 만족했을때 sky블루가 오른쪽으로 가고 그다음 핑크가 내려오는것이고 false일때 핑크가 먼저 올라가고 그다음 sky블루가 왼쪽으로 제자리로 가는것입니다. 스크롤을 천천히 내리고 하다보면 작동하기는 하는데 한번씩 오작동이 나네요. ㅠㅠ
�
왕초보초보
7년 전
http://www.dabagirl.co.kr 여기에 가시면 제일 위쪽 LOGIN JOIN US+18000CART 0 ORDERMY PAGE + BOOKMARK 영역이 있습니다. 이부분을 마우스 스크롤 하게되면 홈이라는 버튼이 생성되는데 addClass로는 해결을 했는데 본 사이트에는 움직임이 있어서 animate로 만든것 같아서 구현해볼려고 하는데 잘안됩니다 ㅠㅠ
�
유레카56
7년 전
animate로 처리 해도 되지만 addClass 는 되셨다고 하니 그렇다면 css 트렌지션으로 적용 하는 방법도 나쁘지 않을것 같은데요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인