목록으로

사이드 메뉴 따라오게 만들기 javascript 채택완료

nanati

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전 조회 3,016

답변 2

테스트페이지요기

js로 클래스를 붙였다 떼는 것으로

사이트메뉴를 붙여 따라오게 만들었습니다.

윈도우 폭이 좁아졌을때는 클래스를 지우도록 설정했기 때문에

가로로 폭이 좁아지면 괜찮은데,

위아래 폭이 좁을때는 푸터와 겹치게 됩니다.

혹시 사이드메뉴를 푸터까지만 따라오게 설정할수도 있나요?

이용한 js는 아래와 같습니다.

잘 부탁드립니다.

Copy

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

#js #javascript #자바스크립트 #jquery #제이쿼리

답변 2개

정렬:

채택된 답변

+20 포인트

나시

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

innerHeight 를 이용하시면 되지 않을까요?

로그인 후 평가할 수 있습니다

답변에 대한 댓글 6개

nanati

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

innerHeight라는게 있군요,
제가 js는 잘 모르고 검색해서 짜집기 하는거라서요^^
알려주신 innerHeight로 검색해서 찾아보겠습니다~
감사합니다^^

나시

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

헉... 누군지도 안보고 댓글 달았네요
[code]
var dh = $(window).innerHeight();
[/code]
해서 비교구문에서 적절히 넣으시면 될거 같습니다.

nanati

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

@나시 님 감사합니다^^
알려주신대로 참고로 해서 함 짜집기 해볼게요~~~!!

nanati

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

@나시 나시님, 혹시
[code]
var dh = $(window).innerHeight();
[/code]
요 코드는 전체 높이 구하는 거죠??
요 코드를 이용해서 밑에서부터 몇 픽셀 이렇게 구할 수도 있는건가요??

나시

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전

$(this).scrollTop()
이게 현재 스크롤된 높이이니까
dh - $(this).scrollTop()
현재 바닥까지의 남은 픽셀로 생각되네요
이걸 변수로 해서 footer 의 크기를 감안해서 작성하시면 되지 싶은데...

테스트를 직접 해본게 아니라서 정확하지는 않습니다 ^^