sticky Header(2) 스틱키 헤더 - 자바스크립트 없이 CSS만으로 스티키헤더 만들기

W3schools를 참고한 지난번 포스팅

https://aosceno.tistory.com/358

sticky header 스티키 헤더 - 상단에 광고바도 붙어있는데 정신없이 나왔다 들어갔다 하는 효과 말고 정말 원래 걍 착 붙어있는것마냥 스르륵 상단에 붙었다 제 위치로 돌아가게는 어떻게 함?

 

 

이 사이트를 구경하다가 만일 스틱키헤더가 2개가 필요하고, 그 헤더와 헤더 사이엔 스틱키 시키지 않을 요소가 있다면 코드는 어떻게 되는가? 궁금해져서 짜봤다.

스와니코코

 

(파일첨부)

스틱키헤더가 2개라면(자바스크립트사용).zip

0.00MB

 

(제이쿼리만 해봤찌 자바스크립트는... 기초도 부실해서 이렇게 번거롭게 짰다...;)

문제는.. 작동은 하는데..ㅠ.ㅠ.. 광고창을 지웠을시 여전히 높이값이 광고창을 지우기 전의 값으로 인식하여
광고창이 닫힌 이후에는 매끄럽게 보이지 않는다는 점이었다...
이건 뭐 계속 그... 뭘 변수를 새로 받아오는.. 뭘 짜야할 것 같지만... 그것까진 모르므로... ㅠ...

저기까지 가는데도 자꾸 실패를 해서;;; 일단 다 짜고 나서 보니 너무... 바보같은것임... 그래서 w3School 왼쪽을 구경하다가 처음 알게 된 사실

 

---

 

https://www.w3schools.com/howto/howto_css_sticky_element.asp

How To Create a Sticky Element

  position:sticky;  

relative; absolute; fixed; 만 알았지 sticky; 라는게 있는건 처음 알았다 ㅠ.ㅠ
아 당연히 물론ㅋㅋㅋ 익스에선 거진 지원 안됨 (ㅎ)... 그렇기에 저렇게 자바스크립트를 이용한 스티키 헤더 항목이 따로 있는 것 같다 ㅇㅇ

position:sticky; position:-webkit-sticky; top:NNN;
여기서 이 top 값을 주면 되는것임 ㅇㅇ...

페이지의 스크롤 값이 원래 객체의 절대위치 offsetTop 값을 넘어가면
css에서 준 top 값으로 마치 position:fixed 한 것 처럼 전환된다.
 = 스틱키헤더가 여러개일때, 그리고 그 여러개 사이에 화면에 따라붙게 하지 않을 요소들도 존재할 때 쓰면 엄청 편하다
게다가 광고창을 닫든 열든 부드럽게 작동한다!!!!

단점: IE 지원 안함ㅋㅋㅋ

 

 

자바스크립트 없이 스틱키헤더.zip

0.00MB

 

저 자바스크립트를 이용한 2개의 스틱키헤더 만들기와
자바스크립트 없이 position:sticky; 를 사용할 때 HTML 단계에서 공통적으로 주의해야 할 점이 있다.

그건 바로 <header></header> 안에 스틱키 시킬 요소들을 넣지 말 것...이다.

자바스크립트를 이용하였을시 header위에 아무리 광고바가 2341234개 있더라도 offsetTop 값을 0으로 불러들어오더라..header 자체의 특성인가? 모르겠음 ㅠ.ㅠ..
header가 아니라 기타 블록태그에 넣으면 될 것 같긴 함...

css sticky 속성으로 할 때엔 header나 뭐 다른 블록요소로 묶어서 넣으면 안되는 이유는
만일 <header></header>안에 스틱키시킬 요소를 넣었다고 쳤을때
스크롤을 아무리 내려도 </header>이후로는 스틱키가 되지 않는다 ㅇㅇ!!!!!!!
외국계 홈페이지를 보면 왜 본문중에 스크롤 하다보면 사진이 중앙에 있었는데 본문 끝나고 다음 본문 시작하기 전까지는 화면 상단에 부드럽게 붙는 애들 있지 않은가..그럴때 쓰라고 나온 css 같음...
그래서 메뉴에 쓴답시고 <header></header>안에 넣고 그 다음에 <div></div> 이런 형제 요소들이 온다면
스틱키메뉴는 형제요소에 가려져서 보이지 않게 된다 ㅇㅇ...

그렇지만 그냥 이것만 사용해선 동적인 네비게이션바를 만들기 힘들 것 같다... 아무래도 제이쿼리나 자바스크립트를 써서 특정 조건에 달했을때 여러가지 효과가 나오게 하는건 이 sticky만으로는 무리인듯...ㅠ...

결론: 본인 방금 자바스크립트 안 쓰고 화려한 메뉴 만드는거 상상함ㅋ 하지만 어림도 없지