Cara Menambahkan Plugin Menu Navigasi Sticky jQuery di Blogger

LIVE DEMO | UNDUH

Ini adalah cara mudah untuk membuat menu navigasi yang menempel di atas jendela saat menggulir ke bawah halaman. Kami ingin menu tetap berada di atas setelah kami menggulir ke bawah lebih jauh dari posisi semula. Beberapa baris jQuery akan membantu. Ini markupnya: Cara menggunakannya:1.Masukkan jQuery library di halaman web

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>

2. Buat menu navigasi

<div id = "demo_top_wrapper">
 
    <! - tajuk dengan logo hanya untuk memiliki beberapa konten sebelum menu ->
    <div id = "demo_top">
        <div class = "demo_container">
            <div id = "my_logo"> Logo kami </div>
        </div>
    </div>
 
    <! - ini akan menjadi menu navigasi kami ->
    <div id = "sticky_navigation_wrapper">
        <div id = "sticky_navigation">
            <div class = "demo_container">
                <ul>
                    <li> <a href="#" class="selected"> HOME </a> </li>
                    <li> <a href="#"> TENTANG KAMI </a> </li>
                    <li> <a href="#"> LAYANAN </a> </li>
                    <li> <a href="#"> KLIEN </a> </li>
                    <li> <a href="#"> PARTNERS </a> </li>
                    <li> <a href="#"> KONTAK </a> </li>
                </ul>
            </div>
        </div>
    </div>
 
</div> <! - #demo_top_wrapper ->
 
<! - beberapa konten lain harus ada di sini, untuk memiliki scrollbar ->

3. CSS

.demo_container {width: 980px; margin: 0 otomatis; }
#demo_top_wrapper {margin: 0 0 20px 0; }
#demo_top {height: 100px; padding: 20px 0 0 0; }
#my_logo {font: 70px Georgia, serif; }
 
/ * gaya menu kami * /
#sticky_navigation_wrapper {width: 100%; tinggi: 50px; }
#sticky_navigation {width: 100%; tinggi: 50px; background: url (trans-black-60.png); -moz-box-shadow: 0 0 5px # 999; -webkit-box-shadow: 0 0 5px # 999; box-shadow: 0 0 5px # 999; }
#sticky_navigation ul {list-style: none; margin: 0; padding: 5px; }
#sticky_navigation ul li {margin: 0; bantalan: 0; display: inline; }
#sticky_navigation ul li a {display: block; mengapung: kiri; margin: 0 0 0 5px; padding: 0 20px; tinggi: 40px; garis-tinggi: 40px; ukuran font: 14px; font-family: Arial, serif; font-weight: bold; warna: #ddd; latar belakang: # 333; -moz-border-radius: 3px; -webkit-border-radius: 3px; batas-jari-jari: 3px; }
#sticky_navigation ul li a: hover, #sticky_navigation ul li a.selected {color: #fff; latar belakang: # 111; }

4. Javascript

$ (function () {
 
    // ambil offset awal awal navigasi 
    var sticky_navigation_offset_top = $ ('# sticky_navigation'). offset (). top;
     
    // fungsi kami yang memutuskan cuaca bilah navigasi seharusnya memiliki posisi css "tetap" atau tidak.
    var sticky_navigation = function () {
        var scroll_top = $ (window) .scrollTop (); // posisi vertikal kita saat ini dari atas
         
        // jika kita telah menggulir lebih dari navigasi, ubah posisinya menjadi tetap untuk tetap di atas,
        // jika tidak ubah kembali ke relatif
        if (scroll_top> sticky_navigation_offset_top) { 
            $ ('# sticky_navigation'). css ({'position': 'fixed', 'top': 0, 'left': 0});
        } lain {
            $ ('# sticky_navigation'). css ({'position': 'relative'}); 
        }   
    };
     
    // jalankan fungsi kami di load
    sticky_navigation ();
     
    // dan jalankan lagi setiap kali Anda menggulir
    $ (window) .scroll (function () {
         sticky_navigation ();
    });
 
});

Plugin jQuery yang mengagumkan ini dikembangkan oleh backslash . Untuk Penggunaan Lanjut lainnya, silakan periksa halaman demo atau kunjungi situs web resmi.