Cara Membuat Sticky Navigasi dengan CSS atau jQuery

Dalam web modern, banyak website menggunakan “Sticky” sebagai fitur yang diletakan di navigasi utama atau menu. Hal ini membuat stik navigasi utama dan tetap dapat terlihat oleh pengguna ketika menggulung (scroll) halaman kebawah sehingga membuatnya lebih mudah diakses.

Beberapa contoh terbaik yang menggunakan fitur ini adalah Facebook dan Trustme. Ketika Anda menggulirkan scroll ke bawah halaman, navigasi utama akan tetap di bagian paling atas dan tidak akan bergerak.

unheap

 

Meskipun ada banyak plugin jQuery yang dapat kita gunakan untuk membuat sticky navigasi, itu dapat dilakukan hanya dalam beberapa baris jQuery dan kode CSS. Dalam tutorial ini kita akan melihat bagaimana kita dapat membuat sticky navigasi baik versi jQuery dan CSS.

Apa saja yang Anda butuhkan pada tutorial ini:

  • Pengetahuan dasar tentang CSS
  • Pengetahuan dasar tentang jQuery
  • Waktu dan Kesabaran

Versi jQuery 

Dalam bagian dari tutorial, kita akan menggunakan jQuery untuk memanipulasi DOM dan menambahkan kelas untuk membuat navigasi sticks utama di bagian atas halaman saat titik tertentu tercapai. Saya berasumsi bahwa Anda sudah akrab dengan elemen HTML5 dan kita akan menggunakan beberapa dari mereka di markup kita.

The Markup

Untuk markup, kita akan membuat header dengan class demo-nav dan kemudian diikuti dengan menu utama dengan class utama-nav yang mencakup serangkaian link untuk menu utama. Kemudian kita akan menyiapkan konten dan membungkus mereka dalam class content. Kita akan menggunakan konten Lorem ipsum sebagai teks kosong kita.

 

<header>
<h1>Creating <span>Sticky</span> Navigation</h1>
<nav class="demo-nav">
        <a href="index.html" class="active">Using jQuery</a>
        <a href="index2.html" >Using CSS</a>
    </nav>
</header>
<nav class="main-nav">
<div class="container">
 <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Profile</a>
  <a href="#">Contact</a>
  </div>
</nav>
<div class="content">
<h2>Main Content Here!</h2>
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
Lorem ipsum dolor 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
</div>

Seperti yang Anda lihat, tidak ada yang istimewa pada markup hanya beberapa tag dan kelas HTML5.

CSS

Sekarang mari kita memberikan markup tersebut beberapa kehidupan. Kita akan menerapkan style dasar untuk elemen-elemen standar seperti pada body, tag header, header navigasi dan sebagainya.

body {
    font:16px/1.5 'Raleway',Arial,sans-serif;
    color:#fff;
    margin:0;
    padding:0
}
 
h1 {
    font-size:50px;
    font-weight:300;
    text-align:center;
    font-weight:700
}
 
span {
    color:#27ae60;
    font-weight:700
}
 
h2 {
    font-size:35px;
    text-align:left;
    margin-left:-20px
}
 
nav.demo-nav {
    width:350px;
    margin:0 auto;
    display:block
}
 
nav.demo-nav a {
    font-size:19px;
    display:inline-block;
    text-align:center;
    font-family:'Lato',sans-serif;
    color:#27ae60;
    font-weight:400;
    padding:5px 15px;
    text-transform:uppercase;
    border-radius:2px;
    letter-spacing:1px;
    text-decoration:none;
    margin-right:10px;
    border:2px solid #ecf0f1;
    border-radius:none
}
 
nav a.active,nav a:hover {
    background:#ecf0f1;
    color:#27ae60
}

 Sekarang mari kita beralih ke Header dan navigasi utama. Kita akan memberikannya bar navigasi dengan posisi relatif. Buatlah tinggi 68px dan mengatur lebar sebesar 100 persen. Juga memberikan perbatasan di bagian bawah dengan tebal 1px, dan mengatur beberapa gaya pada link dan beberapa sembarang padding.

header {
    height:250px;
    background:#2ecc71;
    padding:23px 0
}
 
nav.main-nav {
    background:#fff;
    height:60px;
    border-bottom:1px solid #dadada;
    text-align: center;
}
 
nav.main-nav a {
    font-family:'Lato',sans-serif;
    font-size:20px;
    text-decoration:none;
    display:inline-block;
    padding:15px 19px;
    color:#27ae60;
}
 
.container {
    display: inline;
    margin:0 auto;
}

Selanjutnya, kita akan membuat class khusus dan memeberikan nama serta posisi tetap pada stickytop. Ini akan menangani Sticky navigasi Anda nanti pada kode jQuery

nav.main-nav.stickytop {
    position:fixed;
    top:0
}

Mari kita beralih ke area konten utama. Untuk wilayah konten, kita akan memberikan padding 50px dan menetapkan tiga kolom. Pada CSS3 tata letak multi-kolom memungkinkan untuk menset up beberapa kolom teks seperti kolom surat kabar. Column-gap sendiri akan menangani ukuran kesenjangan antara kolom.

.content {
    color:#222;
    padding:50px;
    -webkit-column-count:3;
/* Chrome, Safari, Opera */
    -moz-column-count:3;
/* Firefox */
    column-count:3;
    -webkit-column-gap:40;
    column-gap:40px;
}
 
.content h2 {
    margin:0;
}

Sebagai langkah terakhir, tambahkan beberapa media queries pada header dan navigasi utama serta wadah navigasi utama dan konten untuk membuat tema yang responsif pada perangkat yang lebih kecil.

@media all and (min-width: 360px) and (max-width: 480px) {
    header {
        padding:5px 0 55px;
    }
 
    nav.main-nav a {
        font-size:17px;
    }
 
    nav.main-nav {
        height:55px;
    }
 
    .container {
        margin:0 auto;
        width:50%;
 
    }
 
    .content {
        -webkit-column-count:1;
        /* Chrome, Safari, Opera */
        -moz-column-count:1;
        /* Firefox */
        column-count:1;
    }
}
 
@media screen and (max-width: 480px) {
    header {
        padding:5px 0 55px;
    }
 
    nav.main-nav a {
        font-size:17px;
    }
 
    nav.main-nav {
        height:55px;
    }
 
    .container {
        width:92%;
    }
 
    .content {
        -webkit-column-count:1;
        /* Chrome, Safari, Opera */
        -moz-column-count:1;
        /* Firefox */
        column-count:1
    }
}

The Script

Untuk membuat efek Sticky navigasi utama melayang, kita akan menggunakan fungsi anonim untuk memicu sebuah event di titik tertentu di mana kita ingin membuat sticks navigasi utama.

Catatan: Karena kita menggunakan jQuery, jangan lupa untuk menghubungkan library jQuery di <head> baik melalui Library Google Hosted atau secara manual menempatkan jquery.js di dalam folder js Anda.

Dalam kode di bawah ini ketika $ window.scroll () berhenti di 290, itu akan menambahkan class Stickytop ke menu utama Anda, jika tidak kita akan menyiapkan statement lain untuk menghapusnya jika tidak mencapai titik tertentu.

Cobalah sekarang dan tambahkan kode jQuery berikut sebelum tag penutup </ body>. Pastikan Anda membungkus kode di dalam <script> </ script> tag.

$(function(){
    $(window).scroll(function() {
        if ($(this).scrollTop() >= 290) {
            $('nav.main-nav').addClass('stickytop');
        }
        else {
            $('nav.main-nav').removeClass('stickytop');
        }
    });
});

Versi CSS 

Sekarang kita telah melihat cara membuat Sticky navigasi via jQuery mari kita sekarang melihat bagaimana kita dapat membuat ini melalui CSS juga.

 The Markup

Sama seperti markup yang digunakan pada contoh jQuery, kita akan menggunakan persis markup yang sama tetapi posisi header dan navigasi utama akan beralih menggunakan CSS.

<header>
 
<h1>Creating <span>Sticky</span> Navigation</h1>
 
 
<nav class="demo-nav">
        <a href="index.html" >Using jQuery</a>
        <a href="index2.html" class="active">Using CSS</a>
    </nav>
 
</header>
 
 
 
<nav class="main-nav">
 
<div class="container">
 <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Profile</a>
    <a href="#">Contact</a>
  </div>
 
</nav>
 
 
 
<div class="content">
 
<h2>Main Content Here!</h2>
 
 
 
 
Lorem ipsum dolor 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
 
 
 
Lorem ipsum dolor 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
 
 
 
Lorem ipsum dolor 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
 
 
 
Lorem ipsum dolor 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
 
 
 
Lorem ipsum dolor 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
 
 
 
Lorem ipsum dolor 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
 
 
 
Lorem ipsum dolor 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
 
 
 
Lorem ipsum dolor 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
 
 
 
Lorem ipsum dolor 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
 
 
 
Lorem ipsum dolor 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
 
 
 
Lorem ipsum dolor 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
 
 
</div>

CSS

Kami memiliki hampir CSS yang sama seperti contoh jQuery di atas kecuali untuk class nav.main-nav karena kita perlu menambahkan posisi fixed dan menambahkan beberapa posisi CSS. Cobalah perhatikan CSS di bawah ini.

nav.main-nav {
    background:#fff;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

 CSS Sticky Way lainnya

Untuk pengguna Chrome, webkit memperkenalkan nilai posisi baru yang disebut Sticky yang menciptakan efek yang sama seperti kode jQuery yang telah digunakan di atas. Namun ini belum diaktifkan secara default. Saya akan menyarankan membaca artikel ini untuk mempelajari lebih lanjut. Anda dapat memeriksa ini dan dapat digunakan sebagai konten untuk dukungan.

Comments

comments