Membuat Slide Bar on Scroll dengan CSS
Slide Bar on Scroll ialah efek dimana ketika kita mempunya sebuah fitur namun fitur tersebut tak akan muncul sebelum kita scroll artikel dibawahnya. Amat menarik bukan efek CSS ini, nah kali ini saya akan menshare bagaimana sih Membuat Slide Bar on Scroll dengan CSS. Mari kita praktekan seketika.
Pertama-tama buaka text editor kalian dan ketikan kode html dibawah ini dan beri nama dengan nama index.html dan jangan lupa disimpan yah.
<!DOCTYPE html>
<html>
<head>
<title>Membangun Slide Bar on Scroll dengan CSS</title>
<link rel=stylesheet href=style.css type=text/css>
</head>
<body>
<div id=navbar>
<a href=#home>Home</a>
<a href=#news>News</a>
<a href=#contact>Contact</a>
</div>
<div style=padding:15px 15px 2500px;font-size:30px>
<p><b>ini Demo ketika di Scroll Karenanya fitur akan muncul :P</b></p>
<p>Scroll down this frame to see the effect!</p>
<p>Scroll to the top to hide the navbar.</p>
<p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
lalu setelah tag penutup </div> ketikan kode di bawah ini.
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById(“navbar”).style.top = “0”;
} else {
document.getElementById(“navbar”).style.top = “-50px”;
}
}
</script>
Lalu setelah itu kalian bikin file csss nya, beri nama dengan nama style.css dan simpan file tersebut sejajar dengan file index.html ketikan kode css di bawah ini.
body {
margin: 0;
background-color: #f1f1f1;
}
#navbar {
background-color: #e74c3c;
position: fixed;
top: -50px;
width: 100%;
display:block;
transition: top 0.3s;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}demikianlah panduan Membuat Slide Bar on Scroll dengan CSS semoga bermanfaat.. keep coding 😀
Sumber https://kursuswebsite.org
