특정 지점을 넘어가면 나타나는 요소
본문
네이버쇼핑의 한 페이지 입니다. 아래 상품은 저랑 전혀 상관없음다..
스크롤을 어느정도 내렸을때 상단에 구매하기 html요소들이 출력이 되는데 이거와 비슷한 예제가 있을까요?
답변 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>_productTabContainer</title>
<style>
* { margin: 0; padding: 0; }
#_productTabContainer {
position: fixed;
border-bottom: 1px solid #000;
width: 100%;
height: 7.25em;
}
#_productTabContainer .pdinfo {
display: none;
width: 96%;
margin: auto;
}
#_productTabContainer .menubar {
position: absolute;
left: 50%;
bottom: 0;
margin-left: -48%;
list-style-type: none;
display: flex;
width: 96%;
}
#_productTabContainer .menubar li {
flex: 1;
}
#_productTabContainer .menubar a {
padding: 0.7em 0;
display: block;
text-align: center;
text-decoration: none;
background-color: #eee;
color: #000;
font-weight: bold;
}
#_productTabContainer .menubar a.active {
background-color: darkslateblue;
color: #fff;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var ct = document.getElementById("_productTabContainer");
var ct_top = ct.offsetTop;
var pdinfo = ct.querySelector('.pdinfo');
this.addEventListener("scroll", function () {
if (ct_top - document.documentElement.scrollTop > 0) {
ct.style.top = (0, ct_top - document.documentElement.scrollTop) + "px";
pdinfo.style.display = 'none';
} else {
ct.style.top = "0px";
pdinfo.style.display = 'block';
}
}, false);
}, false);
</script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="_productTabContainer">
<div class="pdinfo">image text button</div>
<ul class="menubar">
<li><a href="#" class="active">상세정보</a></li>
<li><a href="#">리뷰</a></li>
<li><a href="#">Q&A 0</a></li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
