스크롤 이동시 메뉴 고정하는 방법
본문
그누보드는 한 10년만에 다뤄봐서 지금 기억이 가물가물 합니다.
이게 메인페이지에는 적용이 안되고 서브페이지에만 적용이 되야합니다
그럼 head.php를 건드리는게 맞는건지요
저 기능을 써야하는데 고수님들 방법을 좀 알려주시면 진짜 감사하겠습니다!!!
답변 3
위 사이트 보니 스티키가 먹지 않는 구조네요
jquery를 활용하세요
(이런거 때문에 주소 공유를 언급하는거에요 아무리 설명해도 구조때문에 안되면
왜? 난 되는데..?가 되어버립니다.)
$(window).scroll(function() {
var scrollPosition = $(window).scrollTop();
var $subTabBox = $('#subTabBox');
if (scrollPosition >= 100) {
$subTabBox.css({
'position': 'fixed',
'top': '0',
'width': $subTabBox.width() + 'px',
'z-index': '1000'
});
} else {
$subTabBox.css({
'position': 'static'
});
}
});
/ko/theme/bcic/head.php 에 넣었는데 잘 안먹히는거 같아요
스크롤을 하면 올라가고 위에서 메인메뉴가 먹는 100px제외 하고 그 담에 고정되게 하는 기능을 말한 거에요 ㅠㅠ
그래서 위에 스크롤 포지션 100 해드렸는데요 ?
왜 안될까요 에[고 스크롤을 올리니 사라지고 내리니 다시 나타나고 그러더라고용
서브메뉴의 클래스명으로 다음을 설정해주세요
(밑에 코드를 복붙하라는게 아니라, 클래스명으로 설정해주세요)
.서브메뉴클래스명{
position: sticky;
top:0;
}
넵 해보겠습니다.
/bbs/content.php?co_id=페이지명 -> 주소가 이렇게 되는데 이러면 bbs 안에 있는 content.php 를 보면 될까요???
잘 모르겠으면, 그냥 URL 을 공유해주시면 한방에 해결될 문제입니다.
제가 그 페이지 아닙니다. 서브 메뉴 클래스 확인해주세요 > 여기 아님 여기일까요 ?
거기 아닙니다 > 그럼 여기에서 뭘 봐야 하나요 ?
이런 대화만 오고갑니다.
https://bcic0661.mycafe24.com/ko/ 여기 입니다 메인페이지 말고 서브페이지에 메뉴를 누르면 나오는 파란색 바에 있는 중간 메뉴입니다.
헤더 높이 100px
배너 높이 510px
이 두개가 고정 같은데 그러면
window.addEventListener('scroll', function() {
if (window.scrollY >= 610) {
document.getElementById('subTabBox').classList.add('subTabBox_fixed');
} else {
document.getElementById('subTabBox').classList.remove('subTabBox_fixed');
}
});
이렇게하면 간단하지 않나요?
어차피 모바일은 햄버거로 하시니 필요없고..
subTabBox_fixed 클래스로 별도로 fixed css 주시면됩니다.
