이번에 적용해본 코드는 자바스크립트와 CSS를 사용했습니다.
원하는 특정 부분을 상단에 전체에 펼쳐지게 하고 고정되면서 스크롤시 따라오게하는 코드를 적용했습니다.
코드가 적용된 모습 미리보기
원래라면 '라벨이 "발라드"인 게시물 표시'라는 박스 부분이 스크롤시 고정되면 따라오지 않습니다.
자바스크리트와 CSS 코드를 적용한 후에 '라벨이 "발라드"인 게시물 표시'라는 부분이 스크롤시 상단에 고정되어 전체로 펼쳐진채 스크롤되는 것을 확인할 수 있습니다.
적용된 자바스크립트 코드 보기
위 자바스크립트 코드 사진에서 빨간색 밑줄 친 부분만 스크롤시 고정을 시키려고 하는 'class 이름'으로 변경하여 넣어 주면 됩니다.
Class 이름을 찾아봤습니다
제가 고정시키려고한 부분의 클래스명(이름)을 'F12'관리자 창 모드로 확인해 봤을때 'queryMessage'라는 것을 확인할 수 있었습니다.
때문에 위 자바스립트 코드 빨간색 밑줄 친 부분에 'queryMessage'로 변경해준 것 입니다.
자바스크립트 코드 복사는 아래 "더 보기"
코드 복사하기
적용된 CSS 코드 보기
또한 위에서 파란색으로 밑줄처진 Class(이름)값을 CSS 코드에 새로 넣어줘야 자바 스크립트와 작동하여 적용됩니다.
해당 코드는 위와 같습니다.
CSS 코드 복사는 아래 "더 보기"
코드를 넣는 위치
자바스크립트 코드는 html 부분에 <head></head> 사이 또는 <body></body>사이에 넣어 줍니다.
CSS 코드는 간단하게 CSS 입력 부분에 추가하여 넣어줍니다.
코드 적용시 겪은 에러 사항
티스토리에 해당 코드를 적용할 경우 티스토리에는 HTML코드와 CSS코드의 구분이 명확하기 때문에 자바스크립트 코드와 CSS 코드를 쉽게 코드를 넣어 줄 수 있었습니다.
다만 구글 블로그스팟에 적용할때는 블로그스팟에 HTML코드와 CSS코드를 넣는 구간이 명확하지 않기에 해당 코드를 넣어줄 부분을 찾는데 꽤나 애를 먹었습니다. (블로그스팟에서의 자바스크립트를 넣을 위치는 스킨마다 달라서 정확한 위치를 말하지 못하는 점 양해부탁드립니다.)
댓글