안녕하세요 코드블리입니다.
고객사에서 기존 은행권 랜딩 사이트에
플로팅 메뉴를 올려달라고 요청을 받았는데, 보통 이러한 경우는 랜딩페이지의 html로 주시면
거기에 맞춰 퍼블리싱을 합니다.
그런에 이번엔 그냥
따로 만들어 달라고 요청이 왔어요
근데 이게..아주 쉬워보이지만
기존의 레이아웃이 없다면
반응형으로 넓이 높이를 지정하지 않고 만들어야 하기때문에
더 고난이도 작업이 되지요.
여튼 3번의 피드백을 받고 완성이 되었습니다.
*화면로딩시 보이지 않지만, 마우스를 스크롤 다운하면 나타나서
상단에 항상 노출되는 가로 플로팅 메뉴*
1. 플로팅 메뉴에 상품이 몇개 올라갈지 모르니 유동적으로 만들어 달라.
2. 객체의 넓이 , 높이를 임의로 지정하지 말아달라.
3. 항상 수직 탑, 수평가운데에 메뉴바가 위치하여야 한다. 메뉴바에 색상을 넣어달라 (배경이미지 안됨)
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
/* 스크롤 반응 헤더 */
#menubar {
position:fixed;
background-color:#005ea1;
top: -150px;
display: block;
transition: top 0.3s;
left: 50%;
transform: translate(-50%, -50%);
}
.box-title {
position: relative;
padding : 10px;
}
.box-container {
display: flex;
justify-content:center;
padding-top:10px;
}
.box {
float:left;
font-size: 30px; /*이미지가 들어갈시 삭제 */
padding: 0 10px;
}
</style>
</head>
<body>
<!-- 반응형 헤더 -->
<div id="menubar">
<div id="navbar">
<div class="box-title">
<img src="mo_20230322_114105631(43x26).png"> <img src="title_m.png">
<div class="box-container">
<div class="box">이미지1</div>
<div class="box">이미지2</div>
<div class="box">이미지3</div>
<div class="box">이미지4</div>
</div>
</div>
</div>
</div>
<div style="height:3000px;">
본문 내용
</div>
</body>
<script type="text/javascript">
<!--
// 스크롤 반응 헤더
var prevScrollpos = window.pageYOffset;
// 스크롤 내려갈 시 고정될 nav
var navbar = document.getElementById("menubar");
window.onscroll = function() {
// 반응형 헤더
var currentScrollPos = window.pageYOffset;
// 만약 방금 스크롤이 지금 스크롤보다 크다면 (페이지를 위로 올리는 행위라면)
if (prevScrollpos > currentScrollPos) {
document.getElementById("menubar").style.top = "-150px";
} else {
// 만약 방금의 스크롤이 지금 스크롤보다 작다면 (페이지를 아래로 내리는 행위라면)
document.getElementById("menubar").style.top = "50px";
}
prevScrollpos = currentScrollPos;
}
//-->
</script>
</html>'개발자생' 카테고리의 다른 글
| 웹/앱 UI UX 기획자를 위한 참고 사이트 정리 #1. 마인드맵 (0) | 2023.03.13 |
|---|
