Sticky Menu adalah suatu tampilan menu dengan posisi tetap ketika kita melakukan scroll di halaman website. Dan pada kali ini saya akan membahas tentang sticky menu pada artikel tentang Cara Membuat Sticky Menu Dengan Menggunakan AngularJs.
Untuk membuat Sticky menu saya menggunakan beberapa metode dari jquery seperti offset top untuk mengetahui tinggi dari headernya. Karena menu sticky akan pada posisi tetap ketika header sudah tidak terlihat saat kita melakukan scroll.
Oke langsung saja langkah pertama Cara Membuat Sticky Menu Dengan Menggunakan AngularJs kita buat struktur htmlnya seperti berikut ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html ng-app="demo"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://code.angularjs.org/1.1.5/angular.min.js"></script> </head> <body> <div class="header">Cara Membuat Sticky Menu Dengan AngularJs</div> <div class="some-element" sticky use-placeholder> <a href="">Home</a></li> <a href="">Contact</a></li> <a href="">About</a></li> </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non lacus ante. Etiam facilisis turpis eget orci pharetra, eget consectetur eros porttitor. Quisque pellentesque ligula vel convallis viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum pellentesque, mi in dapibus pretium, nisl dui sagittis felis, a aliquet erat purus ut diam. Nam vitae quam ut justo pharetra vehicula. Mauris placerat mauris quis fringilla feugiat. Duis bibendum hendrerit arcu, at lobortis lorem luctus vel. Proin scelerisque eros vitae eros rutrum, vel iaculis erat blandit. Ut pharetra interdum tellus, non suscipit magna varius luctus. Aliquam neque erat, viverra eu venenatis vel, volutpat vel leo. </div> </div> </body> </html> |
Jika sudah maka kita akan membuat style cssnya seperti di bawah ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<style> *{padding: 0;margin:0;} body { height: 3000px; padding:0; margin:0; } .header { font-size:2em; padding: 1em; text-align: center; } .some-element{ width:100%; margin:auto; padding: 1em 0; font-size:1.5em; text-align: center; background-color: salmon; text-align: center; } a{ text-decoration: none; color: black; font-size: 20px; padding: 10px; } .content{ height:3000px; width: 800px; margin:auto; padding: 10px; background-color: #fff; border: 1px solid #888; } .stuck { position: fixed; top: 0; } </style> |
Dan css di atas saya hanya akan menjelaskan yang berhubungan dengan posisi menu yang akan berubah ya teman-teman. Di dalam style css saya membuat .stuck dengan posisi fixed dan topnya 0px yang berarti akan membuat suatu elemen dengan nama kelas stuck berada di posisi tetap paling atas. Kelas ini akan saya tambahkan ke dalam div class=”some-element” ketika kita scroll dan posisi header sudah tidak terlihat.
Dan langkah selanjutnya saya akan membuat fungsi angularjs dimana didalamnya ada beberapa metode yang saya manfaatkan dari jquery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<script> angular.module("demo", []) .directive("sticky", function($window) { return { link: function(scope, element, attrs) { var $win = angular.element($window); if (scope._stickyElements === undefined) { scope._stickyElements = []; $win.bind("scroll.sticky", function(e) { var pos = $win.scrollTop(); for (var i=0; i<scope._stickyElements.length; i++) { var item = scope._stickyElements[i]; if (!item.isStuck && pos > item.start) { item.element.addClass("stuck"); item.isStuck = true; if (item.placeholder) { item.placeholder = angular.element("<div></div>") .css({height: item.element.outerHeight() + "px"}) .insertBefore(item.element); } } else if (item.isStuck && pos < item.start) { item.element.removeClass("stuck"); item.isStuck = false; if (item.placeholder) { item.placeholder.remove(); item.placeholder = true; } } } }); var recheckPositions = function() { for (var i=0; i<scope._stickyElements.length; i++) { var item = scope._stickyElements[i]; if (!item.isStuck) { item.start = item.element.offset().top; } else if (item.placeholder) { item.start = item.placeholder.offset().top; } } }; $win.bind("load", recheckPositions); $win.bind("resize", recheckPositions); } var item = { element: element, isStuck: false, placeholder: attrs.usePlaceholder !== undefined, start: element.offset().top }; scope._stickyElements.push(item); } }; }); </script> |
Script di atas ada kondisi dimana jika nilai item.isStucknya bernilai tidak false dan nilai variable pos yang di dapat dari scroll lebih besar dari variable item.start atau tinggi header maka .stuck akan di tambahkan kedalam div class=”some-element”. Jika teman-teman buka di browser maka akan seperti pada gambar di bawah ini.
Demikian artikel tentang Cara Membuat Sticky Menu Dengan Menggunakan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.