반응형
<!DOCTYPE html>
<html>
<head>
<title>위치속성</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
.header{width: 100%; height: 80px;
background-color: tomato;
position:fixed; top:0px; left: 0px;
box-shadow: 10px 10px 3px 6px blue;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cdeb8e+0,a5c956+100;Green+3D+%232 */
background: #cdeb8e; /* Old browsers */
background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cdeb8e 0%,#a5c956 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
z-index: 100;
}
.header ul{list-style: none;}
.header ul li{float: left; padding: 5px 10px;}
.clear{clear:both;}
html,body{height: 100%;margin: 0px;}
section{width:100%; height: 100%;}
.profile{background-color: #ccc;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//Jquery 시작
$(document).ready(function(){
$("#moveProfile").on("click",function(){
var position = $("#profile").offset().top;
//$(window).scrollTop(position);
$("html").animate({scrollTop:position},1000);
});
$("#moveHome").on("click",function(){
var position = $("#home").offset().top;
//$(window).scrollTop(position);
$("html").animate({scrollTop:position},1000);
});
});
$(window).scroll(function(){
var position = $("#profile").offset().top;
console.log(position);
console.log($(window).scrollTop());
});
</script>
</head>
<body>
<div class="header">
<!--
<ul>
<li><a href="#home"><i class="fas fa-tag"></i>home</a></li>
<li><a href="#profile">profile</a></li>
<li><a href="#contact">contact</a></li>
</ul>
-->
<ul>
<li id="moveHome"><i class="fas fa-tag"></i>home</li>
<li id="moveProfile">profile</li>
<li id="moveContact">contact</li>
</ul>
</div>
<section id="home">home</section>
<section id="profile" class="profile">profile</section>
<section id="contact">contact</section>
</body>
</html>반응형
'웹프로그래밍 기초 > A반소스자료' 카테고리의 다른 글
| 실습소스 (0) | 2023.05.12 |
|---|---|
| 위치속성과 변형/애니메이션 (0) | 2023.05.11 |
| 디스플레이속성 과 폰트속성 (1) | 2023.04.27 |
| CSS 테스트 (0) | 2023.04.06 |
| 레이아웃 & CSS (3) | 2023.03.30 |
댓글