답변 3개 / 댓글 7개
채택된 답변
+20 포인트
헤더 높이 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 주시면됩니다.
위 사이트 보니 스티키가 먹지 않는 구조네요
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'
});
}
});서브메뉴의 클래스명으로 다음을 설정해주세요
(밑에 코드를 복붙하라는게 아니라, 클래스명으로 설정해주세요)
Copy
.서브메뉴클래스명{
position: sticky;
top:0;
}답변에 대한 댓글 4개
답변을 작성하려면 로그인이 필요합니다.
스크롤을 하면 올라가고 위에서 메인메뉴가 먹는 100px제외 하고 그 담에 고정되게 하는 기능을 말한 거에요 ㅠㅠ