Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
Tags
- 글자 수 제한
- Ajax
- 비동기호출
- MySQL
- 날짜변환
- 리사이즈
- JavaScript
- JS
- 날짜비교
- selinux
- 정규식
- SSL
- 디지털 정부서비스ui/ux
- 우분투 npm 설치
- 정부 서비스 가이드라인
- 글자수제한
- 배열
- .htaccess
- ip직접접근차단
- Vanilla JS
- 우분투
- 페이지전환효과
- 애니메이트
- 자바스크립트
- 보안인증서
- post_type
- 301 리다이렉트
- virsualhost
- iframe
- 구글뷰어
Archives
- Today
- Total
더 나은 프로그래머가 되자
탑메뉴 고정 jquery 본문
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<style>
html,body {margin:0; padding:0;}
div {text-align:center;}
#wrapper {width:800px; overflow:hidden; margin:0 auto;}
#wrapper #header {background-color:#ffff00; color:#bbb; height:100px;}
#wrapper #menu {background-color:#bbb; height:50px; color:#fff; width:800px;}
#wrapper #contents {background-color:#eee; height:1500px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var menupos =
$("#menu").offset().top;
$(window).scroll(function(){
if($(window).scrollTop() >= menupos) {
$("#menu").css("position","fixed");
$("#menu").css("top","0");
} else {
$("#menu").css("position","relative");
$("#menu").css("top","");
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="menu">menu</div>
<div id="contents"> contents </div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<style>
html,body {margin:0; padding:0;}
div {text-align:center;}
#wrapper {width:800px; overflow:hidden; margin:0 auto;}
#wrapper #header {background-color:#ffff00; color:#bbb; height:100px;}
#wrapper #menu {background-color:#bbb; height:50px; color:#fff; width:800px;}
#wrapper #contents {background-color:#eee; height:1500px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var menupos =
$("#menu").offset().top;
$(window).scroll(function(){
if($(window).scrollTop() >= menupos) {
$("#menu").css("position","fixed");
$("#menu").css("top","0");
} else {
$("#menu").css("position","relative");
$("#menu").css("top","");
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="menu">menu</div>
<div id="contents"> contents </div>
</div>
</body>
</html>
'언어 > js' 카테고리의 다른 글
| jquery onchange 처리 (0) | 2014.02.18 |
|---|---|
| form reset 폼 리셋 (0) | 2014.02.18 |
| 탑메뉴 고정 jquery (0) | 2013.06.13 |
| setInterval,clearInterval (0) | 2013.06.12 |
| 영문만 입력받기 (0) | 2013.05.24 |
Comments