JS 기능 구현 2

📌학습 내용

📖 Scroll Top

💡 구상

스크롤을 올렸을 때 상단에 고정된 네비게이션의 색상이 변하도록 함

💡 메모

• 스크롤 감지 방법

1. window.addEventListener('scroll')
2. window.onscroll = function(){}
3. document.addEventListener('scroll')

• 스크롤 좌표 구하는 작업의 크로스 브라우징

var top = window.scrollY  // 익스 지원 X
	|| window.pageYOffset   // 익스8 이하 지원 X
	|| document.documentElement.scrollTop  // 크롬 지원 X
	|| document.body.scrollTop  // 익스 지원 X

CSS
onscroll: https://www.w3schools.com/jsref/event_onscroll.asp

💡 스크롤 내리면 변하게 하기

스크롤 좌표 구하는 코드가 codepen에서 오류가 나서 예전처럼 코드 복붙!

📎html

	<nav class="active">
		<ul>
			<li><a href="#">메뉴1</a></li>
			<li><a href="#">메뉴2</a></li>
			<li><a href="#">메뉴3</a></li>
			<li><a href="#">메뉴4</a></li>
		</ul>
	</nav>

	<section class="section-1">
		<h2>Section 1</h2>
		<p>토끼와 곰돌이 토끼와 곰돌이 토끼와 곰돌이 토끼와 곰돌이 </p>
	</section>

📎CSS

nav {
	position: fixed;
	width: 100%;
	background-color: #000;

	border-bottom: solid 1px rgba(0, 0, 0, .1);

	padding: 22px 0;
	transition: all 0.5s; /* all: 모든 속성이 transition 효과를 가짐 */

	display: flex;
	justify-content: space-between;
	align-items: center;
}

nav.active {
	background-color: white;
}

nav.active a {
	color: #000;
}

nav ul {
	display: flex;
}

nav ul li {
	font-size: 14px;
	margin-left: 25px;
}

.section-1 {
	padding-top: 70px;
}

📎JS

var fixedNav = document.querySelector('nav');

window.addEventListener('scroll', function(){

	// 스크롤바 좌표 구하기 
	var top = window.scrollY 
				|| window.pageYOffset  
				|| document.documentElement.scrollTop 
				|| document.body.scrollTop 

	/* 
	if(top > 50) {
		fixedNav.classList.add('active');
	} else {
		fixedNav.classList.remove('active');
	} 
	*/

	(top > 50)
		? fixedNav.classList.add('active')
		: fixedNav.classList.remove('active');

})

💡 업/다운에 따라 색상 변하게 하기

(1) 스크롤에 따라
📎JS

var oldVal = 0;

window.addEventListener('scroll', function() {
	var newVal = window.scrollY 
				|| window.pageYOffset  
				|| document.documentElement.scrollTop 
				|| document.body.scrollTop 

	if(oldVal - newVal < 0) {
		fixedNav.classList.add('active');
	}

	if(oldVal - newVal > 0) {
		fixedNav.classList.remove('active');
	}

	oldVal = newVal;
})

(2)휠의 움직임에 따라
휠의 좌표를 알려주는 wheelDelta를 이용하여 down에서 음수값, up에서 양수값을 출력하게 하고 크로스브라우징을 위해 삼항연산자로 detail까지 적용해줌

📎JS

window.addEventListener('wheel', function(e) {

	var index = e.wheelDelta ? e.wheelDelta : -e.detail;

	(index < 0)
		? fixedNav.classList.add('active')
		: fixedNav.classList.remove('active');
})

💡 크로스 브라우징

위의 wheel 코드는 파이어폭스에서 적용되지 않기 때문에 크로스 브라우징을 위해 DOMMouseScroll 인수를 넣어줌

코드 간소화하기

브라우저 정보를 나타내는 navigator.userAgent를 활용하여 웹이 파이어폭스 브라우저를 감지할 경우 자동적으로 DOMMouseScroll 인수를 적용하게 하기

📖 Modal

💡 구상

-특정 영역 클릭 시에 back layer가 깔린 팝업창(Modal)
-'닫기' 또는 배경 레이어를 클릭 했을 때 창이 닫김

💡 결과물

CSS
visibility: hidden;: 요소를 숨기지만 영역은 그대로 있음 (display: none;은 영역이 함께 삭제됨)

📌어려운 점

🤍

📌해결방법

🤍

📌느낀 점

🤍