var lastScrollTop = 0;
var delta = 5;
var fix = document.querySelector('.category-banner');
var fixWrap = document.querySelector('.wraper');
var fixHeight = fix.offsetHeight;
var didScroll;
window.onscroll = function(e){
didScroll = true;
}
// 반복 0.25초마다 스크롤 여부 체크하여 scroll() 호출
setInterval(function(){
if(didScroll){
scroll();
didScroll = false;
}
}, 250);
function scroll(){
var nowScrollTop = window.scrollY;
console.log(nowScrollTop);
if(Math.abs(lastScrollTop - nowScrollTop) <= delta){
return;
// 0 - 세로 높이가 크거나 같을경우 숫자 반환?
}
if(nowScrollTop > lastScrollTop && nowScrollTop > fixHeight){
// 세로 높이 > 0 and 세로높이 > body 높이
// 상단 고정 헤더 효과 주기
fix.classList.add('active');
fixWrap.classList.add('active');
}else{
if(nowScrollTop + window.innerHeight < document.body.offsetHeight){
// 세로 높이 + 브라우저 창의 높이(창의 크기) < body 값(body의 컨텐츠가 많아지면 커짐)
fix.classList.remove('active');
fixWrap.classList.remove('active');
}
}
lastScrollTop = nowScrollTop;
}
HTMLElement.offsetHeight();
offsetHeight 의 속성은 읽기 전용
정수로서 수직 패딩 및 경계를 포함하는 요소의 높이를 반환
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
HTMLElement.offsetHeight - Web APIs | MDN
The HTMLElement.offsetHeight read-only property returns the height of an element, including vertical padding and borders, as an integer.
developer.mozilla.org
브라우저 관련
https://baeharam.github.io/posts/javascript/js-window/
[Javascript] 브라우저의 창에 대한 이해
개발을 기록하는 블로그 '[Javascript] 브라우저의 창에 대한 이해'을 한 번 살펴보세요.
baeharam.github.io
setInterval();
각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 조각을 실행
나중에 호출하여 제거할 수 있음 - clearInterval();
https://developer.mozilla.org/en-US/docs/Web/API/setInterval
setInterval() - Web APIs | MDN
The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
developer.mozilla.org
window.scrollY
window 문서가 세로로 된 픽셀 수 반환
window.scrollW
가로로 된 픽셀 수 반환
math.abs()
함수 수치의 절대 값을 반환 - 반환 값(주어진 숫자의 절대값)
math.abs(x)
Math.abs('-1'); // 1
Math.abs(-2); // 2
Math.abs(null); // 0
Math.abs(''); // 0
Math.abs([]); // 0
Math.abs([2]); // 2
Math.abs([1,2]); // NaN
Math.abs({}); // NaN
Math.abs('string'); // NaN
Math.abs(); // NaN
function test(a,b){
return Math.abs(a, -b);
}
console.log(test(3,5));
// 2
console.log(test(5,3));
// 2
console.log(test(1.23456, 7.89012));
// 6.655555~https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/abs
Math.abs() - JavaScript | MDN
The Math.abs() function returns the absolute value of a number. That is, it returns x if x is positive or zero, and the negation of x if x is negative.
developer.mozilla.org
Element.classList
읽기 전용 속성
클래스 목록을 조작하는데 사용
var elementClass = element.classList;
classList.add
// 클래스 값 추가, 추가하려는 클래스가 class 속성에 존재한다면 무시
classList.remove
// 클래스 값 제거, 존재하지 않는 클래스 제거 시 에러발생하지 않음
classList.item(number);
// 콜렉션의 인덱스를 이용하여 클래스 값 반환
classList.toggle(String)
// 클래스 값을 토글(클래스 값이 존재한다면 제거 후 false 반환, 존재하지 않으면 추가하고 true를 반환한다)
// 두번째 인수가 있을 때 - 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거
classList.contains(String)
// 지정한 클래스 값이 element의 class 속성에 존재하는지 확인
classList.replace(oldClass, newClass);
// 존재하는 클래스를 새로운 클래스로 교체한다const div = document.createElement('div');
div.className = 'foo';
// our starting state: <div class="foo"></div>
console.log(div.outerHTML);
// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");
// <div class="anotherclass"></div>
console.log(div.outerHTML);
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );
console.log(div.classList.contains("foo"));
// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");
// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);
// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");
비슷하게 Element.className로 대체할 수 있음
클래스명을 변경할 수 있음
var el = document.getElementById('item');
if (el.className === 'active'){
el.className = 'inactive';
} else {
el.className = 'active';
}빈속성이 있는 경우 가반환 됨 ?
'개발 > js & jquery' 카테고리의 다른 글
| [javascript] 객체, 객체 비구조화 할당 (0) | 2022.04.05 |
|---|---|
| [javascript]onclick, alert, prompt, confirm (0) | 2022.01.13 |
| [javascript]document.querySelector, document.querySelectorAll, document.getElementById, document.getElementsByClassName, document.getElementsByTagName 요소 찾기 (0) | 2022.01.11 |
| swiper 알아보기! (0) | 2021.12.17 |
