안녕하세요 코드블리입니다.
고객사는 기존 지폐 랜딩패드로
플로팅 메뉴 업로드 요청을 받았습니다. 이 경우 일반적으로 대상 페이지의 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="http://wmckorea.m/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>