Membuat Slide Bar on Scroll dengan CSS

Slide Bar on Scroll adalah efek dimana ketika kita mempunya sebuah menu namun menu tersebut tidak akan muncul sebelum kita scroll artikel dibawahnya. Sangat menarik bukan efek CSS ini, nah kali ini saya akan menshare bagaimana sih Membuat Slide Bar on Scroll dengan CSS. Mari kita praktekan langsung.

Pertama 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>Membuat 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 Maka menu 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.

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 buat 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;
}

sekian tutorial Membuat Slide Bar on Scroll dengan CSS semoga bermanfaat.. keep coding 😀

Membuat Slide Bar on Scroll dengan CSS

Kategori