-
시작점이 같은 fixed nav바와 스크롤시 로딩바를 만들기위해 로딩바에 마진탑을주면 네브바도 따라서 마진탑이 걸리는 경우 어떻게 하나요 ?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"><style>
.navbar{
position: fixed;
width: 100%;
z-index: 5;
}.navbar-brand{
font-size: 30px;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<main>
<nav class="navbar navbar-light bg-light" style="margin-top: 1px;">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div style="width: 100%; height: 10px; background-color: black; z-index: 10; margin-top: 71px;"></div>
<div style="height: 2000px; background-color: azure;"></div></main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>
var Howscroll = window.scrollY
function 스크롤바백이상폰트() {if (Howscroll > 100) {
document.querySelector('.navbar-brand').style.fontSize="50px"
}
else{
document.querySelector('.navbar-brand').style.fontSize="30px"
}
}
function 스크롤끝까지알림() {if(Howscroll> 1201){
}
}console.log( window.scrollY)
window.addEventListener('scroll',스크롤바백이상폰트)
window.addEventListener('scroll',스크롤끝까지알림)
</script>
</body>
</html>
- 답변은 로그인 후 가능합니다.