헝그리개발자

HTML 에서 고정레이어라고 하면, 특정위치에 고정되어 있어, 화면 스크롤바의 이동과 상관없이

항상 같은 위치에 고정된 레이어를 말한다.

여기서, 다이나믹 고정레이어라고 하면, 필요할때 만 고정된다는 것을 말한다.

요즘 흔히 쓰이는 UI ( 또는 UX ) 구조이다.

예를 들면, G마켓의 상품페이지에보면

중간쯤의 버튼 바(bar) 가 보인다.  상세설명, 상품평, 상품문의, 교환/반품 버튼인데.. 이 부분이 컨텐츠의 특정위치를 차지하고 있다.

상품설명을 보기 위해, 스크롤을 내리면, 상단에 고정이 되며, 스크롤을 올리면, 다시 원래 위치에 표시된다.

샘플은, jquery 를 이용할 것이며, vue.js 도 이용할것이다.

F12 키를 눌러 DevTool 에서, 티스토리 블로그를 샘플 화면으로 해서 상단 header 영역을 가지고 작업할 것이다.

var script = document.createElement('script');
script.onload = function () {
    console.log('jquery loaded');
};
script.src = "https://code.jquery.com/jquery-latest.min.js";

document.head.appendChild(script);

var script = document.createElement('script');
script.onload = function () {
    console.log('vue loaded');
};
script.src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js";

document.head.appendChild(script);

우선, 티스토리 블로그에 jquery, vue.js 가 없으니, 동적으로 로딩한다.

위 코드를 F12 키를 누르면 나오는 DevTool 의 Console 에 입력하고 엔터를 치면, 동적으로 javascript 파일이 로딩된다.

실제 코드에서는 js 파일을 프로젝트에 포함하거나, 아래처럼 CDN 에서 가져다 쓰면 된다.

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

동적으로 js 파일 로딩이 끝났으면,

샘플 vue 객체를 만들것이다.

원리는, scrollY 값을 watch 해서, 값이 바뀌면, 고정레이어 처리를 할것이다.

1. header 의 height 값보다 작으면, 고정레이어 취소

2. header 의 height 값보다 크면, 고정레이어 처리

고정레이어 처리는 단순히, stylesheet 로 postion: fixed 만 설정해주면 끝는다.

scrollY 값은 window scroll 이벤트 발생시 넣어줄 것이다.

new Vue({
	el: 'body',

	data: function() {
		return {
			scrollY: 0
		}
	},

	watch: {
		scrollY: function(newVal, oldVal) {
			if(scrollY > $('#header').outerHeight()) {
				$('#header').css("position", "fixed");
				$('#header').css("z-index", 99999);
				$('#header').css("top", "4px");
				$('#header').css("width", "100%");
			}
			else {
				$('#header').css("position", "");
			}
		}
	},

	created: function() {
		let self = this;
		window.addEventListener('scroll', function(a,b) {
			self.$data.scrollY = window.scrollY;
		});
	}

});

위코드를 DevTool 에서 실행하고 나면, 이제 티스토리 블로그 상단이 다이나믹 고정레이어로 바뀌게 된다.

위의 vue 코드는 vue.js 사용법을 예를 들기 위한 코드로, 쓸데없이 코드가 길다.

실제 javascript 로만 작성하면, 단순하고, 심플해진다.

참고로 확인해보만 아래와 같다.

		window.addEventListener('scroll', function(a,b) {
			if(window.scrollY > $('#header').outerHeight()) {
				$('#header').css("position", "fixed");
				$('#header').css("z-index", 99999);
				$('#header').css("top", "4px");
				$('#header').css("width", "100%");
			}
			else {
				$('#header').css("position", "");
			}
		});

this.$data.my_object.col1 = "";

this.$data.my_object.col2 = "";

위와같이 중첩된 데이터에 컬럼을 추가 하게 되면, my_object 는 Observable 데이터이지만,

col1, col2 는 Observable 데이터가 아니다.

콘솔 로그로 확인해보면,

$data 를 확인해보면, my_object 는 observer 로 되어 있는걸 확인할 수 있다.

get my_object / set my_object 라는 property 가 자동으로 생성이 된것이다.

하지만, my_object 를 펼쳐보면, col1, col2 에는 아무것도 없다.

즉, col1, col2 는 vue 의 반응형 데이터로 동작하지 않는다는 것이다.

nested object 에 반응형 데이터를 추가하기 위해서, Vue.set 문장으로 바꾸어 보자.

Vue.set(this.$data.my_object, 'col1', '');

Vue.set(this.$data.my_object, 'col2', '');

다시, 콘솔 로그로 확인해보자.

my_object 안에 col1, col2 모두 observable 데이터로 등록이 된것을 확인할 수 있다.