네비게이션 상단픽스
본문
반응형 웹으로 코딩 중입니다.
PC화면에서는 스크롤해서 아래쪽으로 내려 갈 경우
중간에 있던 메뉴(네비게이션)가 상단에 고정되도록 픽스 시켰는데,
스맛폰 화면으로 작아졌을 경우에는 픽스되지 않도록 하고 싶습니다.
jQuery(function($){
var nav = $('#fixedBox'),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});
});
이 코드를 써서, #fixedBox라는 div에 fixed라는 클래스를 붙여서 CSS에서 픽스되도록 입력 해 놓았는데,
저 코드에서 어디를 어떻게 수정해야
사이즈가 작아졌을 때는 fixed라는 클래스가 붙지 않도록 할 수 있을까요?
가르침 주시면 감사하겠습니다^^
답변 3
if( ($(window).scrollTop() > offset.top) && window.innerWidth > 419 ) {
nav.addClass('fixed');
}
window width가 420 이상일 경우에만 fixed 클래스가 붙습니다.
window.innerWidth 을 쓰는것보다 $(window).innerWidth() 라고 쓰는게 더 정확하네요.
if( ($(window).scrollTop() > offset.top) && $(window).innerWidth() > 419 ) {
매번 감사합니다 건님!
알려주신대로 적용해서 해결했습니다 ^^
복 받으실 거예용 ㅎㅎ
감사합니다, 더 공부할게요 ^^
반응형이면 미디어쿼리로 해당 width 일 경우 처리하도록 각각 해상도별 css 를 구성하는게 맞겠네요.
jQuery에서의 처리 방법이 궁금했었습니다 ^^
답변 감사합니다 ~
답변을 작성하시기 전에 로그인 해주세요.
