제이쿼리로 고정 메뉴를 만들었는데
관련링크
http://red2.net/red2v11b3/
81회 연결
본문
제 홈페이지에 제이쿼리로 고정 메뉴를 만들었는데
창을 줄여도 offset().top 값이 변하지 않네요
창을 줄일 때마다 새로 고침을 해야
top 값이 변해서 번거로운데
resize와 scroll 을 동시에 써야 할까요?
아니면 자바스크립트로 미디어쿼리를 구현하는 방법이 있을까요?
$(function(){
/* https://www.codingfactory.net/10745 */
var navbarOffset = $( '.navbar' ).offset();
//alert(navbarOffset.top);
$( window ).scroll(function() {
if ( $( document ).scrollTop() > navbarOffset.top ) {
$( '.navbar' ).addClass( 'navbar-fixed' );
}
else {
$( '.navbar' ).removeClass( 'navbar-fixed' );
}
});
});
답변 2
$(function(){
var navbarOffset = $('.navbar').offset();
$(window).resize(function() {
navbarOffset = $('.navbar').offset();
});
$(window).scroll(function() {
if ($(document).scrollTop() > navbarOffset.top )
$('.navbar').addClass('navbar-fixed');
else
$('.navbar').removeClass('navbar-fixed');
});
});
</script>
잘 되네요. 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.