사이드 메뉴 따라오게 만들기 javascript

nanati

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-03-13 (화) 17:04:11 4,487

테스트페이지요기

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개 / 댓글 8개

채택된 답변

+20 포인트

나시

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-03-13 (화) 19:37:53

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

답변에 대한 댓글 6개

nanati

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-03-13 (화) 19:53:43

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

나시

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-03-13 (화) 19:59:52

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

nanati

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-03-13 (화) 20:01:08

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

nanati

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-03-14 (수) 10:06:10

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

나시

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2018-03-14 (수) 10:10:27

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

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