스크롤 이동시 메뉴 고정하는 방법 채택완료
http://sir.kr/data/editor/2412/3543548039_1733709228.7076.png" width="100%" />
그누보드는 한 10년만에 다뤄봐서 지금 기억이 가물가물 합니다.
이게 메인페이지에는 적용이 안되고 서브페이지에만 적용이 되야합니다
그럼 head.php를 건드리는게 맞는건지요
저 기능을 써야하는데 고수님들 방법을 좀 알려주시면 진짜 감사하겠습니다!!!
답변 3개
헤더 높이 100px
배너 높이 510px
이 두개가 고정 같은데 그러면
</p>
<p>window.addEventListener('scroll', function() {</p>
<p> if (window.scrollY >= 610) {</p>
<p> document.getElementById('subTabBox').classList.add('subTabBox_fixed');</p>
<p> } else {</p>
<p> document.getElementById('subTabBox').classList.remove('subTabBox_fixed');</p>
<p> }</p>
<p>});</p>
<p>
이렇게하면 간단하지 않나요?
어차피 모바일은 햄버거로 하시니 필요없고..
subTabBox_fixed 클래스로 별도로 fixed css 주시면됩니다.
댓글을 작성하려면 로그인이 필요합니다.
위 사이트 보니 스티키가 먹지 않는 구조네요
jquery를 활용하세요
(이런거 때문에 주소 공유를 언급하는거에요 아무리 설명해도 구조때문에 안되면
왜? 난 되는데..?가 되어버립니다.)
</p>
<p>$(window).scroll(function() {
var scrollPosition = $(window).scrollTop();
var $subTabBox = $('#subTabBox');</p>
<p> if (scrollPosition >= 100) {
$subTabBox.css({
'position': 'fixed',
'top': '0',
'width': $subTabBox.width() + 'px',
'z-index': '1000'
});
} else {
$subTabBox.css({
'position': 'static'
});
}
});</p>
<p>
답변에 대한 댓글 3개
댓글을 작성하려면 로그인이 필요합니다.
서브메뉴의 클래스명으로 다음을 설정해주세요
(밑에 코드를 복붙하라는게 아니라, 클래스명으로 설정해주세요)
</p>
<p>.서브메뉴클래스명{</p>
<p>position: sticky;</p>
<p>top:0;</p>
<p>}</p>
<p>답변에 대한 댓글 4개
제가 그 페이지 아닙니다. 서브 메뉴 클래스 확인해주세요 > 여기 아님 여기일까요 ?
거기 아닙니다 > 그럼 여기에서 뭘 봐야 하나요 ?
이런 대화만 오고갑니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
스크롤을 하면 올라가고 위에서 메인메뉴가 먹는 100px제외 하고 그 담에 고정되게 하는 기능을 말한 거에요 ㅠㅠ