사이드 메뉴 따라오게 만들기 javascript
본문
js로 클래스를 붙였다 떼는 것으로
사이트메뉴를 붙여 따라오게 만들었습니다.
윈도우 폭이 좁아졌을때는 클래스를 지우도록 설정했기 때문에
가로로 폭이 좁아지면 괜찮은데,
위아래 폭이 좁을때는 푸터와 겹치게 됩니다.
혹시 사이드메뉴를 푸터까지만 따라오게 설정할수도 있나요?
이용한 js는 아래와 같습니다.
잘 부탁드립니다.
var dw = $(window).innerWidth();
var $sideNav = $('#sideNav'),
offset = $sideNav.offset();
// Nav Fixed
$(window).scroll(function () {
if (dw > 768) {
if (($(this).scrollTop() > 124) && $(window).innerWidth() > 767) {
$('#sideNav').addClass('sidefix');
} else {
$('#sideNav').removeClass('sidefix');
}
} else {
if (dw < 767) {
if (($(this).scrollTop() > 0) && $(window).innerWidth() < 768) {
$('#sideNav').removeClass('sidefix');
} else {
$('#sideNav').removeClass('sidefix');
}
}
}
});
답변 2
innerHeight 를 이용하시면 되지 않을까요?
innerHeight라는게 있군요,
제가 js는 잘 모르고 검색해서 짜집기 하는거라서요^^
알려주신 innerHeight로 검색해서 찾아보겠습니다~
감사합니다^^
헉... 누군지도 안보고 댓글 달았네요
var dh = $(window).innerHeight();
해서 비교구문에서 적절히 넣으시면 될거 같습니다.
@나시 님 감사합니다^^
알려주신대로 참고로 해서 함 짜집기 해볼게요~~~!!
@나시 나시님, 혹시
var dh = $(window).innerHeight();
요 코드는 전체 높이 구하는 거죠??
요 코드를 이용해서 밑에서부터 몇 픽셀 이렇게 구할 수도 있는건가요??
$(this).scrollTop()
이게 현재 스크롤된 높이이니까
dh - $(this).scrollTop()
현재 바닥까지의 남은 픽셀로 생각되네요
이걸 변수로 해서 footer 의 크기를 감안해서 작성하시면 되지 싶은데...
테스트를 직접 해본게 아니라서 정확하지는 않습니다 ^^
감사합니다 - 참고로해서 적용해보겠습니다!!
흉내쟁이님 감사합니다!^^
한번 참고해 볼게요~!!!
@흉내쟁이 흉내쟁이님 감사합니다!
ㅠㅠ 제 능력으로는 js편집이 어려워서
알려주신 스크립트를 적용해서 해결했습니다^^ 감사해요~
답변을 작성하시기 전에 로그인 해주세요.