스크롤에 따라 고정되는 제이쿼리
CMS/프레임워크 | Rhymix 2.0 |
---|---|
개발 언어 | PHP 7.2 |
안녕하세요.
제이쿼리 스크롤 높이 위치에 따라 Fixed 를 해주는 코드를 이용 중에 있습니다.
var win = $(window),
header = $(".main"),
headerOffsetTop = header.offset().top;
win.scroll (function(){
if ( $(this).scrollTop() >= headerOffsetTop ) {
header.addClass("fixed");
} else {
header.removeClass("fixed");
}
});
가장상단부터 휠을 내리면 아주 정상적으로 작동하지만
휠을 내린 상태에서 새로고침을하면 fixed 가 스타일에 붙어있어야 정상이지만
휠을 내린 상태에서 새로고침을해보면
안쪽에 내용이 많이들어가서인지 로딩 순서의 문제인지
새로고침 100번에 10번 정도는 붙어있지 않은상태로 출력됩니다.
이상태에서 휠을 1px만 움직여도 fixed css가 붙습니다.
로딩 순서나 main안에 들어간 내용이 무거워서 그런것 같은데
혹시 해결할 방법을 아시는분 계신가요?

톰캣
Lv. 11
시대의 흐름에 뒤떨어지지 않도록 아주 천천히지만 노력하고 있습니다.
댓글 3
8번 URL을 남겨주시고 어디에 고정하고 있는지도 남겨주셔야 정확하게 답변이 가능할듯 한데요..
스크롤 핸들러를 선언만 하지 말고 페이지 로딩 직후에 직접 한 번 실행해 주세요.
win.scroll(function() {
... (중략) ...
}).triggerHandler('scroll');
진심으로 감사드립니다.
.triggerHandler('scroll'); 이걸 넣으니 최상단으로 갔다가 다시 이동해서 높이값을 인식해서 100% 확률로 다 작동이 됩니다!!