sticky Header(2) 스틱키 헤더 - 자바스크립트 없이 CSS만으로 스티키헤더 만들기
W3schools를 참고한 지난번 포스팅 https://aosceno.tistory.com/358 sticky header 스티키 헤더 - 상단에 광고바도 붙어있는데 정신없이 나왔다 들어갔다 하는 효과 말고 정말 원래 걍 착 붙어있는것마냥 스르
aosceno.tistory.com
(1)jQuery로 header를 인클루드 시켰을 때엔 해당 인클루드 파일에서 스크립트를 실행해야만 header의 높이 및 위치 값을 정확히 불러옵니다. 외부에서 스크립트를 실행하면 인클루드 된 header의 높이값,위치값을 읽지 못함
(2)반응형 (헤더 상단의 광고 갯수, 광고 높이, 헤더 본인 높이 고정값이 아님 ^^)
(3)바닐라 자바스크립트
화면예제
HTML
CSS
JS, inlcuded HTML (header)
소스파일
'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| 선택한 요소(1)와 선택한 요소(2)사이의 형제들도 선택하기 - (1):click (0) | 2021.03.12 |
|---|---|
| 클릭한 요소의 siblings()를 바닐라 자바스크립트 (vanilla JS)로 반환 (2) (0) | 2021.03.12 |
| Neon Glass Effect (Photoshop/ CSS) (0) | 2021.02.25 |
| ColorThief를 이용하여 이미지에서 색 추출하기 (0) | 2020.11.06 |
| ajax(jQuery / vanilla JS)로 탭메뉴 만들어보기 (0) | 2020.10.30 |