[DAY - 40] window.height / width, window.open, location, window.scrollY, window.scrollTo, header fixed

• window.height / width
• window.open
• location
• window.scrollY
• window.scrollTo
• header fixed

 

 

1) window.height / width

 

  <script>
    'use strict';
    const h1 = window.innerHeight; // 주소, 메뉴 등 미포함
    const h2 = window.outerHeight; // 전체 높이
    const w1 = window.innerWidth; // 스크롤바 제외
    const w2 = window.outerWidth; // 스크롤바 포함

    console.log('스크롤바 제외 높이', h1);
    console.log('스크롤바 포함 높이', h2);

    console.log('스크롤바 제외 너비', w1);
    console.log('스크롤바 포함 너비', w2);

  </script>

 

웹 페이지의 높이와 가로의 px을 출력할 수 있다.

 

 

 

2) window.open

 

  <script>
    'use strict';
    window.open('http://www.google.com')

    // 2초 후에 열기(콜백함수)
    setTimeout(() => {
      window.open('http://www.google.com')
    }, 2000);


    setTimeout(() => {
      window.open('http://www.google.com', '', 'width=300, height=400')
    }, 3000);


  </script>

 

window.open을 사용하면 새로운 웹 페이지가 열리게 된다.

('주소', '이름', '옵션')

3초 뒤에 열리는 구글 창은 가로 300, 세로 300 크기로 열리게 된다.

 

 

 

3) location

 

  <script>
    'use strict';
    setTimeout(() => {
      // 현재 페이지 이동
      location.href='http://www.google.com';
    }, 3000);
  </script>

 

window.open은 새로운 페이지가 열리고 반면 location은 현제 페이지가 바뀌게 된다.

 

 

 

4) scrollY

 

  <script>
    'use strict';
    window.addEventListener('scroll', e=>{
      console.log(window.scrollY);
    })
  </script>

 

window.scrollY는 현재 열려있는 페이지의 가장 윗부분이 몇 px인지 나타내 준다.

 

 

 

5) scrollTo

 

  <script>
    'use strict';
    let btn = document.querySelector('button');

    btn.addEventListener('click',e=>{
      window.scrollTo({top : 3000, behavior : 'smooth'});
      // 3000으로 이동 smooth하게
    })
  </script>

 

window.scrollTo는 특정 스크롤로 이동할 때 사용한다.

위 코드에서 btn을 누르게 되면 3000으로 옵션인 smooth하게 이동한다.

 

* 주로 아래에 fixed된 화살표에 top : 0을 사용하여 맨 위로 가기 버튼을 만든다.

 

 

 

6) header fixed

 

    #header {
      width: 100%;
    }
    
    #header.on {
      z-index: 100;
      position: fixed;
      left: 0;
      top: 0;
      background: rgba(255, 255, 255, 0.5);
    }

    //getComputedStyle : css 속성값 가져오기
    window.addEventListener('scroll', e => {
      // let t = document.documentElement.scrollTop
      let t = window.scrollY

      let hh = parseInt(getComputedStyle(header).height);

      if (t > hh) {
        header.classList.add('on');
      } else {
        header.classList.remove('on');
      }
    })

맨 위

중간

 

스크롤이 header의 height를 넘어서게 되면 on class를 add 해 주어 fidex 된 채로 스크롤에 변함없이 따라오는 메뉴를 만들 수 있다.