jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기
상단 고정 메뉴
웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 것입니다.
jQuery를 이용한 상단 고정 메뉴
다음은 jQuery를 이용한 상단 고정 메뉴 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
body {
margin: 0px;
padding: 0px;
}
.jbTitle {
text-align: center;
}
.jbMenu {
text-align: center;
background-color: yellow;
padding: 10px 0px;
width: 100%;
}
.jbContent {
height: 2000px;
}
.jbFixed {
position: fixed;
top: 0px;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$( document ).ready( function() {
var jbOffset = $( '.jbMenu' ).offset();
$( window ).scroll( function() {
if ( $( document ).scrollTop() > jbOffset.top ) {
$( '.jbMenu' ).addClass( 'jbFixed' );
}
else {
$( '.jbMenu' ).removeClass( 'jbFixed' );
}
});
} );
</script>
</head>
<body>
<div class="jbTitle">
<h1>Site Title</h1>
</div>
<div class="jbMenu">
<p>
First Menu
Second Menu
Third Menu
Fourth Menu
</p>
</div>
<div class="jbContent">
</div>
</body>
</html>
상단에서는 사이트 제목과 메뉴가 다 보입니다.
스크롤해서 밑으로 내려가면 메뉴가 고정됩니다.
스크립트의 의미를 살펴보겠습니다.
var jbOffset = $( '.jbMenu' ).offset();
메뉴의 위치를 파악합니다.
$( window ).scroll( function() {
스크롤이 발생하면 함수를 실행시킵니다.
if ( $( document ).scrollTop() > jbOffset.top ) {
문서의 스크롤바 위치가 메뉴의 수직 위치보다 아래라면
$( '.jbMenu' ).addClass( 'jbFixed' );
메뉴에 jbFixed 클래스를 추가하여 고정시키고,
else {
$( '.jbMenu' ).removeClass( 'jbFixed' );
}
그렇지 않다면 제거합니다.
jQuery / 맨 위로 부드럽게 이동하는 링크 만들기
사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, jQuery의 scrollTop()을 이용하면 맨 위로 스르륵 올라가는 효과를 쉽게 만들 수 있습니다. HTML 문서에 ...
jQuery / Method / .add() - 요소를 추가로 선택하는 메서드
.add() .add()는 어떤 요소를 추가로 선택할 때 사용합니다. 문법 .add( selector ) 예를 들어 $( 'ul' ).add( 'p' ) 는 ul 요소를 선택하고, 추가로 p 요소를 선택합니다. 예제 1 li 요소를 선택하고, 추가로 p 요소를 선택한 후 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...
jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법
특정 요소를 자식 요소로 갖는 요소를 선택하는 방법 jQuery의 :has 선택자를 이용해서 특정 요소를 자식 요소로 갖는 요소를 선택할 수 있습니다. 예를 들어 $( 'p:has( span )' ).css( 'color', 'red' ); 는 span 요소를 자식 요소로 갖고 있는 p 요소의 색을 빨간색으로 만듭니다. 특정 요소를 자식 요소로 갖지 않는 요소를 선택하는 방법 특정 요소를 자식 요소로 ...
예를 들어 h2를 p로 바꾸고 싶다면 다음과 같이 합니다. $( 'h2' ).contents().unwrap().wrap( '<p></p>' ); h2 요소를 선택하고 내용으로 들어간 후 h2 태그를 없애고 p 태그로 감싼다. 새로운 태그를 붙이면서 클래스를 넣을 수도 있습니다. $( 'h2' ).contents().unwrap().wrap( '<p class="myclass"></p>' );
jQuery / Method / .parent() - 부모 요소 선택하는 메서드
.parent() .parent()는 어떤 요소의 부모 요소를 선택합니다. 문법 .parents( ) selector에 값이 없으면 부모 요소를 선택하고, 값이 있으면 부모 요소에 그 selector가 있어야 선택합니다. 예를 들어 $( 'p' ).parent().css( 'color', 'green' ); 은 p의 부모 요소의 색을 녹색으로 만들고, $( 'p' ).parent( 'div' ).css( 'color', 'green' ); 은 p의 부모 요소가 div일 때만 녹색으로 만듭니다. 예제 ef를 클래스 값으로 갖는 ...
jQuery / Method / .css() - 선택한 요소의 css 속성값을 가져오거나, 속성을 추가하는 메서드
.css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가한다. 문법 1 - 속성의 값 가져오기 propertyName의 속성값을 가져온다. .css( propertyName ) 예를 들어 아래는 h1 요소의 스타일 중 color 속성의 값을 가져온다. $( "h1" ).css( "color" ); 문법 2 - 속성 추가하기 style 속성을 추가한다. .css( propertyName, value ) 예를 들어 아래는 h1 요소에 style 속성을 추가하여 글자색을 녹색으로 ...
jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자
:even은 짝수 인덱스 요소를 선택하는 선택자이다. 문법 $( ':even' ) 예를 들어 다음은 짝수 인덱스 문단을 선택한다. 주의할 점은 첫번째 요소 인덱스가 0부터 시작한다는 것이다. $( 'p:even' ) 예제 짝수 인덱스의 li 요소를 선택하여 색을 빨간색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> ...
jQuery로 원하는 meta 태그를 선택하여 값을 가져오는 방법은 다음과 같습니다. $( 'meta' ).attr( 'content' ); meta 태그 중 name이 xxx인 것을 선택하고, content 속성의 값을 가져오라는 뜻입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <meta name="author" content="JB"> <meta property="og:image" content="abc.png"> ...
jQuery / Method / .width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경하는 메서드
.width() .width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다. 문법 1 .width() 선택한 요소의 가로 크기를 반환합니다. 예를 들어 var jbVar = $( 'p' ).width(); 는 p 요소의 가로 크기를 변수 jbVar에 저장합니다. 문법 2 .width( value ) 선택한 요소의 가로 크기를 변경합니다. 예를 들어 $( 'h1' ).width( '100px' ); 는 h1 요소의 가로 크기를 100px로 만듭니다. 예제 1 선택한 요소의 가로 ...
jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드
.empty() .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 태그를 포함한 요소 전체를 제거할 때는 .remove()를 사용합니다. 문법 .empty() 예를 들어 <h1>Lorem</h1> 일 때 $( 'h1' ).empty() 를 하면 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...