채택완료

스크롤 이동시 메뉴 고정하는 방법

3543548039_1733709228.7076.png

그누보드는 한 10년만에 다뤄봐서 지금 기억이 가물가물 합니다.

이게 메인페이지에는 적용이 안되고 서브페이지에만 적용이 되야합니다

그럼 head.php를 건드리는게 맞는건지요 

저 기능을 써야하는데 고수님들 방법을 좀 알려주시면 진짜 감사하겠습니다!!! 

답변 3개 / 댓글 7개

채택된 답변
+20 포인트
2024-12-09 (월) 15:19:39

헤더 높이 100px

배너 높이 510px

이 두개가 고정 같은데 그러면

Copy
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 주시면됩니다.

2024-12-09 (월) 13:52:41

위 사이트 보니 스티키가 먹지 않는 구조네요

jquery를 활용하세요

(이런거 때문에 주소 공유를 언급하는거에요 아무리 설명해도 구조때문에 안되면

왜? 난 되는데..?가 되어버립니다.)

Copy
$(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'
        });
    }
});

답변에 대한 댓글 3개

/ko/theme/bcic/head.php 에 넣었는데 잘 안먹히는거 같아요
스크롤을 하면 올라가고 위에서 메인메뉴가 먹는 100px제외 하고 그 담에 고정되게 하는 기능을 말한 거에요 ㅠㅠ
그래서 위에 스크롤 포지션 100 해드렸는데요 ?
왜 안될까요 에[고 스크롤을 올리니 사라지고 내리니 다시 나타나고 그러더라고용
2024-12-09 (월) 11:05:05

서브메뉴의 클래스명으로 다음을 설정해주세요

(밑에 코드를 복붙하라는게 아니라, 클래스명으로 설정해주세요)

Copy
.서브메뉴클래스명{

position: sticky;

top:0;

}

답변에 대한 댓글 4개

넵 해보겠습니다.
/bbs/content.php?co_id=페이지명 -> 주소가 이렇게 되는데 이러면 bbs 안에 있는 content.php 를 보면 될까요???
잘 모르겠으면, 그냥 URL 을 공유해주시면 한방에 해결될 문제입니다.

제가 그 페이지 아닙니다. 서브 메뉴 클래스 확인해주세요 > 여기 아님 여기일까요 ?

거기 아닙니다 > 그럼 여기에서 뭘 봐야 하나요 ?

이런 대화만 오고갑니다.
https://bcic0661.mycafe24.com/ko/ 여기 입니다 메인페이지 말고 서브페이지에 메뉴를 누르면 나오는 파란색 바에 있는 중간 메뉴입니다.

답변을 작성하려면 로그인이 필요합니다.