[javascript]scrollTop, 스크롤시 상단 메뉴 사라짐

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

브라우저 관련 

https://baeharam.github.io/posts/javascript/js-window/

[Javascript] 브라우저의 창에 대한 이해

 

setInterval();

각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 조각을 실행

나중에 호출하여 제거할 수 있음 - clearInterval();

 

 

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

setInterval() - Web APIs | MDN

 

 

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

 

 

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';
}

빈속성이 있는 경우 가반환 됨 ?