728x90
<!DOCTYPE html>
<head>
<style>
body {
margin: 0;
height: 2000px;
}
header {
display: flex;
justify-content: center;
padding: 20px;
width: 100%;
background-color: #eee;
}
.header-inner {
width: 80%;
display: flex;
justify-content: space-between;
}
.gnb a {
text-transform: capitalize;
}
.top-banner {
height: 300px;
background-color: pink;
font-size: 1.5em;
display: flex;
justify-content: center;
align-items: center;
}
header.act {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="top-banner" role="banner">Content</div>
<header>
<div class="header-inner">
<div class="logo">jquery</div>
<div class="gnb" role="navigation">
<a href="#none">home</a>
<a href="#none">company</a>
<a href="#none">product</a>
<a href="#none">contact</a>
</div>
</div>
<script>
let n = $('header').offset().top; //300
$(window).scroll(function () {
if ($(this).scrollTop() > n) {
$('header').addClass("act");
}
else {
$('header').removeClass('act');
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<head>
<style>
a {
text-decoration: none;
color: #000;
}
body {
margin: 0;
height: 150vh;
;
}
header {
display: flex;
justify-content: center;
padding: 20px;
position: fixed;
width: 100%;
background-color: #eee;
transition: 0.5s;
}
.header-inner {
width: 80%;
display: flex;
justify-content: space-between;
}
.gnb a {
text-transform: capitalize;
}
.btn-top {
width: 40px;
height: 40px;
position: fixed;
font-size: 2em;
color: #fff !important;
right: 20px;
bottom: -50px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
text-align: center;
line-height: 45px;
transition: 0.5s;
}
header.active {
background-color: #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}
.btn-top.active {
bottom: 20px;
}
</style>
</head>
<body>
<header>
<div class="header-inner">
<div class="logo">Jquery</div>
<div class="gnb">
<a href="#none">home</a>
<a href="#none">company</a>
<a href="#none">product</a>
<a href="#none">contact</a>
</div>
</div>
</header>
<a class="btn-top" href="#">
<i class="bi bi-arrow-up-short"></i>
</a>
<script>
$(window).scroll(function(){
if($(window).scrollTop() > 50){
$('header, .btn-top').addClass('active');
}
else{
$('header, .btn-top').removeClass('active');
}
})
</script>
</body>
</html>
728x90
'Library > Jquery' 카테고리의 다른 글
| [Jquery] slideToggle(), slideUp() (0) | 2024.04.16 |
|---|---|
| [Jquery] wrap (0) | 2024.04.16 |
| [Jquery] Modal 팝업 (0) | 2024.04.16 |
| [Jquery] Upload profile (0) | 2024.04.12 |
| [Jquery] 포인트정리! (0) | 2024.04.11 |