제이쿼리로 고정 메뉴를 만들었는데 채택완료
ango
6년 전
조회 2,523
제 홈페이지에 제이쿼리로 고정 메뉴를 만들었는데
창을 줄여도 offset().top 값이 변하지 않네요
http://red2.net/red2v11b3/">http://red2.net/red2v11b3/
창을 줄일 때마다 새로 고침을 해야
top 값이 변해서 번거로운데
resize와 scroll 을 동시에 써야 할까요?
아니면 자바스크립트로 미디어쿼리를 구현하는 방법이 있을까요?
</p>
<p>$(function(){</p>
<p>/* <a href="https://www.codingfactory.net/10745" target="_blank" rel="noopener noreferrer">https://www.codingfactory.net/10745</a> */
var navbarOffset = $( '.navbar' ).offset();
//alert(navbarOffset.top);</p>
<p>$( window ).scroll(function() {
if ( $( document ).scrollTop() > navbarOffset.top ) {
$( '.navbar' ).addClass( 'navbar-fixed' );
}
else {
$( '.navbar' ).removeClass( 'navbar-fixed' );
}
});</p>
<p>});</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
6년 전
$(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>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인