Tampilkan bilah navigasi mengambang saat digulir

Saya menggunakan blogspot, dan saya ingin mencapai bilah navigasi mengambang seperti ini:

http://apairandasparediy.com/

Seperti yang Anda lihat, saat Anda menggulir, bilah navigasi mengambang muncul saat meluncur ke bawah.

Yang saya tahu hanyalah membuat bilah navigasi:

<div id="floating-nav-content">
   <div class="floating-nav">
      <ul id="menu-floating-menu" class="menu">
         <li>...</li>
         <li>...</li>
         <li>...</li>
         <li>...</li>
      </ul>
   </div>
</div>

Tetapi hal-hal jQuery atau javascript lainnya masih belum saya ketahui. Saya juga telah mencari tetapi mereka tidak mengajarkan apa yang saya inginkan.

Saya baru mengenal jQuery dan masih belum tahu cara mengimplementasikannya.

Bantuan Anda sangat kami hargai.


javascript navigation jquery css blogger
person kaynewilder    schedule 01.05.2015    source sumber

Jawaban (1)


arrow_upward
3
arrow_downward

Ini harus melakukan apa yang Anda inginkan. (dengan asumsi Anda sudah menyertakan perpustakaan jQuery)

    <script type="text/javascript">
        $(document).scroll(function() {
            if ($(this).scrollTop() == 0) {
                $("#floating-nav-content").slideUp(400);
            } else {
                $("#floating-nav-content").slideDown(600);
            }

        });
    </script>

CSS juga penting, karena ini menempatkan bilah navigasi pada posisi tetap di atas halaman Anda.

    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        #floating-nav-content {
            top: 0;
            width: 100%;
            height: 20px;
            background-color: #000;
            position: fixed;
            display: none;
            color: #FFF;
            padding: 5px;
        }
    </style>

Dan tentu saja HTML. Saya menempatkan semua hal di atas dan di bawah dalam tag body.

    <div id="floating-nav-content">
        Content
    </div>
person Chris Hessler    schedule 01.05.2015
comment
Jelas, ada beberapa gaya yang hilang di sini, dibandingkan dengan contoh Anda, tapi saya yakin Anda bisa mengetahuinya sendiri ;) Semoga berhasil - person Chris Hessler; 01.05.2015
comment
Terima kasih! tetapi masalahnya adalah ketika halaman dimuat, bilah navigasi mengambang terlihat secara default. bagaimana cara menyembunyikannya dan itu hanya akan muncul ketika saya gulir ke bawah? - person kaynewilder; 01.05.2015
comment
Gunakan tampilan: tidak ada; properti di CSS Anda. selain itu, jika karena alasan apa pun hal tersebut tidak berhasil (seharusnya!), Anda dapat mengatasinya menggunakan $(#floating-nav-bar).hide(); di bagian atas skrip Anda. - person Chris Hessler; 01.05.2015
comment
Oh saya lupa. sekarang berfungsi dengan sempurna. terima kasih banyak! - person kaynewilder; 01.05.2015
comment
bagaimana cara membiarkan navigasi mengambang muncul hanya ketika mencapai titik tertentu di halaman saya, katakanlah ketika saya menggulir dan gambar header halaman saya mencapai bagian atas maka itulah saatnya bilah navigasi mengambang akan ditampilkan - person kaynewilder; 01.05.2015
comment
Bergantung pada tinggi header Anda, Anda bisa bermain-main dengan nilai scrollTop(). misalnya: jika ($(ini).scrollTop() ‹ 220) - person Chris Hessler; 01.05.2015