. .
[iklan]

Membuat Hide Menu on Scroll

Langsung saja, berikut kodenya,

HTML :

<div id="hi1">
  <a href="#">Top</a>
  <a href="#blog-pager">Video</a>
  <a href="#footer">Footer</a>
  <a href="#PopularPosts1">Popular</a>
</div>


Script :
<script>
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentS = window.pageYOffset;
  if (prevS > currentS) {
    document.getElementById("hi1").style.opacity = "0.99";
  } else {
    document.getElementById("hi1").style.opacity = "0.02px";
  }
  prevS = currentS;
}
</script>



CSS :

<style>
  body{margin-top:56px}
  html{scroll-behavior:smooth}
#hi1 {
  background-color: #333;
  position: fixed;
bottom:0;left:0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#hi1 a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#hi1 a:hover {
  background-color: #ddd;
  color: black;
}
</style>



Dan ini contoh hasilnya:

.

!

.

.

.

0 comments:

Posting Komentar

Catatan Sementara

 
© 2021 Catatan Afandi Kusuma | www.suwur.com | Furniture.Omasae | JayaSteel | OmaSae | suwur | Galvalum | DepoAirIsiUlang | Seluruh Arsip