스맛폰 사이즈에서의 fixed 메뉴... (js)
본문
맨날 비슷한 작업을 하는데 모르는 게 답답하기만 하네요~
가르침 좀 주세요 ㅠㅠ
http://bookmark.weblike.jp/imtest/
위 사이트 750px이하에서 메뉴가 픽스됩니다.
그리고 스크롤을 내릴때 위로 사라졌다가, 스크롤을 위로 올리면 다시 메뉴가 스르륵 보여집니다..
(설명이 잘 되었는가;;)
일단, 실행?!은 잘 되고 있고, 메뉴의 움직임에 대해서는 문제가 없는데,
천천히 스크롤을 내리다보면, 메뉴가 픽스 되는 순간에,
메인 이미지(그레이부분)부분이 순간적으로 위로 올라갑니다...ㅠ
(약간, 덜컥 거리는 느낌..)
뭐가 문제일지 봐주실 분 계신가요~~~
부탁드려요 ㅠ ㅠ
답변 2
아마 일반적인 방법으로는 할수가 없을거에요.
복제 엘리먼트 만들어서 해당 복제 엘리먼트를 visibility : hidden 해 놓다가
해당 위치로 스크롤 되었을때 visibility : visible 하는 방법도 있지만,
코드 만드는게 힘들기 때문에 맘 편하게 플러그인 사용하면 편합니다...
https://bigspotteddog.github.io/ScrollToFixed/
이거 사용해 보세요.
적용하는 방법은 아래와 같이 필요없는 코드는 주석처리 하고 해당 코드 적용하면 되겠네요.
/*
$win.on('load scroll', function() {
var value = $(this).scrollTop();
if( (value > navPos) && $(window).innerWidth() < 750 ) {
$nav.addClass(fixedClass);
$main.css('margin-top', navHeight);
} else {
$nav.removeClass(fixedClass);
$main.css('margin-top', '0');
}
});
//global-nav fixed
var nav = $('#global-nav'),
offset = nav.offset();
$(window).scroll(function() {
if( ($(window).scrollTop() > offset.top) && $(window).innerWidth() < 750 ) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});
*/
$('#global-nav').scrollToFixed({maxWidth:750});
넵! 그냥 편하게 가려고요 ㅋㅋ
이거 다운해놓고 다음부터 이거 계속 써야겠네요 ㅠㅠ
감사합니다^^
var $win = $(window),
$main = $('#top-slider'),
$nav = $('#global-nav'),
navHeight = $nav.outerHeight(),
navPos = $nav.offset().top,
fixedClass = 'fixed';
$win.on('load scroll', function() {
var value = $(this).scrollTop();
if( (value > navPos) && $(window).innerWidth() < 750 ) {
$nav.addClass(fixedClass);
$main.css('margin-top', navHeight);
} else {
$nav.removeClass(fixedClass);
$main.css('margin-top', '0');
}
});
여기에서
navHeight 의 값이 실제와 다른거 같습니다. 메뉴들의 가로폭이 커져서 2줄로되는게 원인이 아닐까 싶네요
개발도구로 보면
모바일사이즈에서 스크롤하면 상단 메뉴영역이 90px 인데
넘겨지는 값은 68px 입니다.
두줄로 만들지 마시던지
넘기는값을 두줄로 맞추던지 하면 약간 덜걱하는 느낌의 22px정도의 갮이 사라질것 같습니다.
답변 감사합니다.. ㅎ
제가 어느정도 알아야 조언해주신 내용을 반영할텐데 ㅎㅎ
잘 모르겠어서 그냥 건님이 알려주신 js 가져다 사용하기로 했습니다 ㅠ
감사합니다~~
