ajax, 제이쿼리v3 안 먹힘! v2 써라.
1. 어제 한 것부터 계속!
1-1. sjy.js 외부연동
- HTML nav식 (부트스트랩5 navbar 복붙복붙)
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0" id="gnb">
<!-- li a 삭제 -->
</ul>
<!-- form 삭제 -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
- sjy.js 파일 생성해 외부연동 하고, ajax 작성식 옮김
1-2. "isNav" : true ( +if문 )
① navi.json 내용추가
② if문으로 json에서 노출여부 설정 ~ item.isNav 가 true일 때만 실행!
<script>
success : function( naviDB ){
// ul
var gnbli = '';
$.each(naviDB,(index,item)=>{
if( item.isNav ){ // item.isNav가 true일때
gnbli += `<li class="nav-item ${item.naviClass}">
<a class="${item.navLink}">${item.naviTitle}
</a>
</li>`;
}
})
$('#gnb').html(gnbli);
},
</script>
결과물
2. 상단 navi 클릭하면 #섹션 이동
내소개 페이지 상단에 맞춰 navi.json 추가추가
현재 이 상태
2-1. < nav > fixed-top 상단부착
2-2. < section class="wrap" >
<section class="wrap">
<!-- index 0 1 2 맞추려고 큰 section 안에 삽입! 각 섹션들, ul/li와 순번 맞추고자! -->
섹션 #about (json)
섹션 #contact
섹션 #portfolio
</section>
2-3. CSS (메뉴활성화를 위한 스타일세팅)
/* 스크롤 터지게 하는 */
section{ height: 100vh; }+) js 먼저 만들고 css 만든다!
맞춤옷 주문했는데, 입을 사람도 없이 "옷 먼저 만들어!" 한 다음에야 옷주인이 오는 셈.
옷 두번 만들거야?
2-4. 상단 navi 클릭하면 #섹션 이동 (JQ)
화면 출력하고 1회로 끝나는 상단 네비게이션 navi식 (=세팅/출력)
그 아래! 인터랙티브 작업식 작성
-
.on 메서드
클릭 당하는 동적객체 < li >< a >는 실제로 HTML에 없으므로 필요! -
왜 '.scrollPage a' ?
navi.json 확인해라. '섹션이동' 外 '외부링크'는 '.scrollPage' 없음!
즉, 섹션간 이동하느라 '.scrollPage' 있는 < a >만 해당한다는 뜻!
<script>
// "#gnb의 모든 '.scrollPage a' 중" *클릭된a에게 아래 명령 실행!
$('#gnb').on('click','.scrollPage a', function(e){
e.preventDefault(); // a태그의 고유한 기능을 차단(이동 중지),
// 전체 페이지에서 "이 객체의 속성이 href인 모든 섹션"의 top 위치 숫자값을 targetPos 변수에 집어넣어라.
var targetPos = $( $(this).attr('href') ).offset().top
// "body의 ({ 'scrollTop' 위치를 'targetPos'로 }) animation 처리"
$('body, html').animate( { },400, function(){} )
})
</script>22일차 - 제이쿼리) 상단 네비+애니메이션 (1)
https://velog.io/@la_sta/22%EC%9D%BC%EC%B0%A8-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EB%84%A4%EB%B9%84%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98#1-4-2-offset--%EC%9C%84%EC%B9%98%EB%A5%BC-%EC%A7%80%EC%A0%95%ED%95%98%EB%8A%94-%ED%95%A8%EC%88%98
요약) 화면 애니메이션 처리
- 스크롤 탑 위치에 해당 위치값(targetPos)을 넣어서
- 클릭 시 0.4초간 부드럽게 이동 (=그 섹션으로 유유히 간 것처럼 보이도록)
아래는 변수 targetPos 없이, 'scrollTop' : 바로 offset( ).top 값 집어넣은 식
<script>
//실제ul //이벤트 //클릭당하는 동적객체 (실제로 없는 li,a이므로 .on)
(#gnb).on('click', '.scrollPage a', function(e){
//└ navi.json에서 '외부링크'는 '.scrollPage' 없음!
e.preventDefault(); // <a> 태그 툭 이동하는 기능 버림
$('body, html').animate( { // 바디를 애니메이션 치면서 내려갈게
'scrollTop' : $( $(this).attr('href') ).offset().top
}, 400, function(){})
// 애니메이션 끝나고 처리될 실행문
// function(.scrollPage){ 휠 내렸을 때 불 들어오는 식 }
})
</script>
2-5. 섹션이동 애니메이션 끝나고 처리될 실행문
상단 navi 클릭하면 '.active' 글자색 red
2-5-1) .scrollPage에 .active를 건다!
.scrollPage.active a{ color:red }
2-5-2) 애니메이션 끝나고 처리될 실행문
var _this = $(this) // 클릭한 객체의 a를 저장 / $(this)가 어떤 이벤트에 쓰이느냐에 따라 다르니까, 변수 지정
_this.parent().addClass('active').siblings().removeClass('active')<script>
$('#gnb').on('click','.scrollPage a', function(e){
e.preventDefault();
var _this = $(this); // 클릭한 객체의 a를 변수 저장
$('body, html').animate( {
'scrollTop' : $( $(this).attr('href') ).offset().top
}, 400, function(){
_this.parent().addClass('active').siblings().removeClass('active');
// 클래스 줬다뺐다
})
</script>
요소검사 시, 클릭하면 섹션이동 + .active 들어왔다/빠짐
+) 이걸 부트스트랩으로 하려면? 2-6에서 확인!
2-6. 부트스트랩 자바스크립트
HTML
드래그한 것들을 삽입해야 함
JQ : 2-4를 대체하는 식
<script>
// 인터렉티브 식
$('body').scrollspy({ target : '#navbarTogglerDemo02'})
$('[data-spy="scroll"]').each(function(){
var $spy = $(this).scrollspy('refresh')
})
</script>
CSS
.section{
height: 100vh;
}
.scrollPage .nav-link{
position: relative;
}
.scrollPage .nav-link:after{
content: "";
position: absolute;
display: block;
width:0;
margin:auto;
bottom:0;
left:0;
right:0;
height:3px;
background-color: red;
transition: 0.5s;
margin-top: 7px;
}
.scrollPage .nav-link.active:after{
width:100%;
}성공예시
