다연이네

[days02] 1) sticky와 2) fixed으로 sticky 효과 내기 본문

Web/CSS

[days02] 1) sticky와 2) fixed으로 sticky 효과 내기

　다연　 2020. 12. 4. 19:19
반응형

1) sticky 사용해보기

스크롤을 내리지 않은 경우

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
div:last-child {
	/* border: solid 1px red; */
	padding-bottom: 2000px; /* 스크롤 생기라구 */
}

div.sticky_test{
	border: 2px solid #4CAF50;
	background-color: #CAE8CA;
	
	padding: 3px;
	
	position: sticky;
	position: -webkit-sticky;
	top:0;
}
</style>

</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni odio impedit repellat tempora voluptate corrupti architecto consequatur tenetur itaque eum.</p>
<div class="sticky_test"> hello world </div>
<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ratione eaque at excepturi magni unde assumenda pariatur tempora. Voluptatum iusto debitis vitae expedita rem optio eligendi quas ullam quos exercitationem.</p>
	<p>Et laudantium dolore quidem aperiam aspernatur odit dolorum accusamus facere nobis eius commodi error iusto nesciunt excepturi porro non beatae aliquam nihil maiores minus distinctio obcaecati reiciendis illo. Vel eaque.</p>
	<p>Quisquam vero natus unde facere amet hic quo alias vel totam nihil earum deserunt velit fugiat repudiandae aliquid quod libero. Rem nisi quidem quis ad et corporis quas tenetur sint.</p>
</div>
</body>
</html>

 

2) 메뉴바가 sticky인 페이지 만들어보기 

   - 메뉴 버튼 클릭하면 색 변하기

   - 특정 메뉴에 있으면 그 메뉴는 녹색 

스크롤 내리는 경우

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>

body{
	margin: 0;
	font-size: 28px;
	font-family: Arial, sans-serif;
}

header{
	background-color: #f1f1f1;
	padding: 30px;
	text-align: center;
}

#navbar{
	background-color: #333;
	overflow: hidden;
	
	position: sticky;
	position: -webkit-sticky;
	top:0;
}

#navbar a{
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

#navbar a:hover {
	background-color: #ddd;
	color: black;
}

#navbar a.active{
	background-color: #4CAF50;
	color: white;
}

</style>
</head>
<body>

<header>
	<h3>TOP</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</header>
	
<nav id="navbar">
<a href="#" class="active">Home</a>
<a href="#">News</a>
<a href="#">Contact</a>
</nav>
	
	
	<section class="content">
	<h3>Sticky Test</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error voluptatem maxime quia nisi fugiat doloribus laborum quidem expedita ullam.</p>
	<p>Sit quam ad ea perspiciatis libero omnis at ipsam veritatis quidem repellendus laudantium fugit expedita quo nihil aliquid cupiditate tenetur.</p>
	<p>Corporis ex distinctio commodi velit unde doloremque eveniet rerum architecto pariatur fugiat exercitationem asperiores aut hic eligendi reiciendis odit cumque?</p>
	<p>Molestiae a blanditiis unde aspernatur quae tempora qui consequuntur ex placeat? Quibusdam recusandae quis libero ea eius eaque non sapiente?</p>
	<p>Deleniti commodi enim fugit culpa sit iste eius dicta repudiandae labore libero eos amet alias quaerat laudantium exercitationem dolor quae.</p>
	<p>Quae dolorem ipsam fugit voluptatum ipsa molestiae porro dicta. Rem quas aliquam fuga beatae eius illum optio. Eligendi mollitia labore?</p>
	<p>Maiores sequi eligendi omnis deserunt ipsum in ipsam commodi repellat accusamus aut doloremque possimus aspernatur sed quasi earum impedit porro.</p>
	<p>Eveniet id autem ea dignissimos sunt consectetur similique debitis voluptas repudiandae maxime assumenda esse sit et voluptatem hic unde ex!</p>
	<p>Commodi adipisci itaque dicta doloribus magni minus repellat nihil quisquam illo inventore vero vel at beatae laboriosam deleniti saepe quam.</p>
	<p>Dolores autem assumenda dicta numquam tenetur rerum accusantium velit alias cupiditate enim et laborum praesentium recusandae odit temporibus consectetur magnam.</p>
	<p>Est sequi nobis tempore quisquam velit officia tenetur architecto beatae nihil quae pariatur iure. Voluptas velit ad in dolores unde.</p>
	<p>Voluptas quod neque omnis asperiores perferendis excepturi aspernatur nobis molestiae dolores maxime debitis error cum deleniti ipsam vitae suscipit soluta.</p>
	<p>Inventore eum eveniet necessitatibus nisi repellat explicabo pariatur. A voluptatibus nulla facilis. Ea omnis provident est facilis voluptas odio officia.</p>
	<p>Reprehenderit expedita minus minima explicabo ratione veritatis provident modi laborum est rerum voluptate omnis non dolor placeat iste excepturi nobis.</p>
	<p>Veniam magni voluptate magnam obcaecati quisquam explicabo fuga quia saepe aspernatur illo alias quae debitis hic itaque provident nisi laudantium?</p>
	<p>Nulla incidunt modi nemo vero mollitia nam voluptatum dolor cumque sit eius nostrum tenetur nihil molestiae similique amet magni atque!</p>
	<p>Quis ipsa dicta iusto quaerat mollitia accusantium natus rerum nesciunt cupiditate ad! Beatae similique perferendis optio repudiandae id aspernatur consequuntur?</p>
	<p>Assumenda voluptate veniam dolor debitis officia dolorum ducimus doloremque aspernatur pariatur soluta corporis ab est eum illum rem aliquam harum.</p>
	<p>Consequatur consequuntur totam odio ratione enim. Enim veniam obcaecati aliquid atque id adipisci dolorem velit eveniet ducimus eius. Veritatis saepe?</p>
	<p>Nobis dolore reprehenderit accusamus corporis cumque ex itaque harum eius sit iste doloribus dolores tenetur quos labore perspiciatis ab adipisci.</p>
	</section>
	
	
	<script>
	
	</script>
</body>
</html>

 

 

3)  stickey 안쓰고 fixed 써서 똑같은 기능 만들기

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* 06_03 복사해서 스티키 지우고 sticky클래스 생성*/

.sticky{ /* 클래스명이 sticky인 요소의 style 지정  */	
 position:fixed;  /* stickey 안쓰고 fixed 써서 똑같은 기능 만들기  */
	top:0;
	width: 100% 
}

.sticky + .content{ 
/* 클래스명이 sticky를 가진 요소의 다음 형제 요소인 content 클래스를 가진 요소한테 스타일 지정 */
	 padding-top:60px; /*이거 없으면 파랑배경일때 글자가 밑에 깔림 => 그거 방지하기 위해 */
	/* 클래스명이 content인 놈  */
	background-color: lightblue;
	/* 앞에 나오는 애가(nav) sticky를 가지냐 안가지냐에 따라 배경이 노랑이 될수도 안될수도 */
	/* 클래스명이 content를 가진 애한테 파랑 배경을 주겠다
			+	
		조건) 앞의 요소가 sticky라는 클래스명이여야한다.
		
		content의 앞의 요소는 navbar이니까 거기가서 클래스명 sticky를 줘보자
		 */
}


body{
	margin: 0;
	font-size: 28px;
	font-family: Arial, sans-serif;
}

header{
	background-color: #f1f1f1;
	padding: 30px;
	text-align: center;
}

#navbar{
	background-color: #333;
	overflow: hidden;
}

#navbar a{
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

#navbar a:hover {
	background-color: #ddd;
	color: black;
}

#navbar a.active{
	background-color: #4CAF50;
	color: white;
}

</style>
</head>
<body>

<header>
	<h3>TOP</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</header>
	
<nav id="navbar" ><!-- 여기서class="sticky"하면 배경색 바뀜 -->
<a href="#" class="active">Home</a>
<a href="#">News</a>
<a href="#">Contact</a>
</nav>
	
	
	<section class="content">
	<h3>Sticky Test</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error voluptatem maxime quia nisi fugiat doloribus laborum quidem expedita ullam.</p>
	<p>Sit quam ad ea perspiciatis libero omnis at ipsam veritatis quidem repellendus laudantium fugit expedita quo nihil aliquid cupiditate tenetur.</p>
	<p>Corporis ex distinctio commodi velit unde doloremque eveniet rerum architecto pariatur fugiat exercitationem asperiores aut hic eligendi reiciendis odit cumque?</p>
	<p>Molestiae a blanditiis unde aspernatur quae tempora qui consequuntur ex placeat? Quibusdam recusandae quis libero ea eius eaque non sapiente?</p>
	<p>Deleniti commodi enim fugit culpa sit iste eius dicta repudiandae labore libero eos amet alias quaerat laudantium exercitationem dolor quae.</p>
	<p>Quae dolorem ipsam fugit voluptatum ipsa molestiae porro dicta. Rem quas aliquam fuga beatae eius illum optio. Eligendi mollitia labore?</p>
	<p>Maiores sequi eligendi omnis deserunt ipsum in ipsam commodi repellat accusamus aut doloremque possimus aspernatur sed quasi earum impedit porro.</p>
	<p>Eveniet id autem ea dignissimos sunt consectetur similique debitis voluptas repudiandae maxime assumenda esse sit et voluptatem hic unde ex!</p>
	<p>Commodi adipisci itaque dicta doloribus magni minus repellat nihil quisquam illo inventore vero vel at beatae laboriosam deleniti saepe quam.</p>
	<p>Dolores autem assumenda dicta numquam tenetur rerum accusantium velit alias cupiditate enim et laborum praesentium recusandae odit temporibus consectetur magnam.</p>
	<p>Est sequi nobis tempore quisquam velit officia tenetur architecto beatae nihil quae pariatur iure. Voluptas velit ad in dolores unde.</p>
	<p>Voluptas quod neque omnis asperiores perferendis excepturi aspernatur nobis molestiae dolores maxime debitis error cum deleniti ipsam vitae suscipit soluta.</p>
	<p>Inventore eum eveniet necessitatibus nisi repellat explicabo pariatur. A voluptatibus nulla facilis. Ea omnis provident est facilis voluptas odio officia.</p>
	<p>Reprehenderit expedita minus minima explicabo ratione veritatis provident modi laborum est rerum voluptate omnis non dolor placeat iste excepturi nobis.</p>
	<p>Veniam magni voluptate magnam obcaecati quisquam explicabo fuga quia saepe aspernatur illo alias quae debitis hic itaque provident nisi laudantium?</p>
	<p>Nulla incidunt modi nemo vero mollitia nam voluptatum dolor cumque sit eius nostrum tenetur nihil molestiae similique amet magni atque!</p>
	<p>Quis ipsa dicta iusto quaerat mollitia accusantium natus rerum nesciunt cupiditate ad! Beatae similique perferendis optio repudiandae id aspernatur consequuntur?</p>
	<p>Assumenda voluptate veniam dolor debitis officia dolorum ducimus doloremque aspernatur pariatur soluta corporis ab est eum illum rem aliquam harum.</p>
	<p>Consequatur consequuntur totam odio ratione enim. Enim veniam obcaecati aliquid atque id adipisci dolorem velit eveniet ducimus eius. Veritatis saepe?</p>
	<p>Nobis dolore reprehenderit accusamus corporis cumque ex itaque harum eius sit iste doloribus dolores tenetur quos labore perspiciatis ab adipisci.</p>
	</section>
	
	
	<script>
	
	var navbar =document.getElementById("navbar");
	var sticky = navbar.offsetTop; /* 집계부모 형제 */
	/* 메뉴바 위까지의 위치값(길이)를 알아서 스크롤 내릴때 그 위치에 fixed 시키기 위함 */
	
	window.onscroll = function(){
		
	/* console.log(sticky); */ /* f12로 콘솔창 봐서 값 뜨는데 그게 제목 높이 */
	
	//console.log(sticky + "/"+ window.pageYOffset);
		//257/257이 되는 경우
		//js 코딩으로 navbar 요소에 sticky 클래스 추가
		
		if(window.pageYOffset>=sticky){
			navbar.classList.add("sticky"); //sticky라는 클래스 추가
		}else{
			navbar.classList.remove("sticky"); //sticky라는 클래스 제거
		}
/*f12해서 element보면 sticky가 동적으로 추가삭제 됨  */
	}
	
	
	</script>
</body>
</html>

 

 

반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days02] 웹페이지 스킨 선택 (샘플)  (0) 2020.12.04
[days02] 메뉴바 디자인하기, 웹페이지 틀 디자인하기  (0) 2020.12.04
[days02] 위치 속성(position)  (0) 2020.12.04
[days02] display:none과 visibility: hidden  (0) 2020.12.04
[days02] 테이블 만들기  (0) 2020.12.04
'Web/CSS' Related Articles more
Comments