tanyakoding
1

Mau Tanya Cara Show and Hide Navbar Scroll using Bootstrap

17/5/2020400 viewsoleh: Rizky_1453 _
csshtmlbootstap

<script>

  // Scrolling Effect

  $(window).on("scroll", function() {
        if($(window).scrollTop()) {
              $('nav').addClass('black');
        }

        else {
              $('nav').removeClass('black');
        }
  });
  </script>


1 Jawaban

2

Ini salah kondisi if nya saja sih seharusnya. Eventnya sudah bener onscroll. Pertanyaannya pas di scroll mau dicek apanya? Umumnya ya di cek adalah posisi sekarang itu sudah sama gak sama posisi yang diinginkan.

Saya kasih contoh pakai vanilla ya:

var prevScrollpos = window.pageYOffset;

// Attach onscroll event
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

Kode ini saya ambil dari tautan https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp, jadi silahkan mampir dan baca kalau memang dibutuhkan.

Semoga menjawab pertanyaannya.

Salam, @mazipan

dijawab oleh Irfan Maulana
Login dulu untuk memberikan jawaban.

login google
© 2023 tanyakoding.com · about · privacy