Elemen-DIV Diam setelah discroll atau Menu Melayang

Membuat menu melayang setelah discroll menggunakan jQuery. Menu diam atau melengket setelah laman digulung.

Banyak situs menerapkan menu sticky, termasuk 'Header' situs yang sedang Anda baca ini. Saya sendiri tidak menemukan padanan kata sticky ini dalam bahasa Indonesia. Saya menyamakan sticky ini dengan melengket atau melekat. Menu melengket diterapkan agar memudahkan pengunjung mengeksplor situs tanpa harus bolak-balik menggulung (scroll) laman. Menu akan tetap lengket meskipun laman digulung jauh ke bawah.


Bagaimana membuatnya? Salin jQuery berikut dan letakkan di atas tag </body>.
Sesuaikan nama elemen yang akan dibuat sticky. Dalam contoh ini elemen yang saya sticky adalah 'menu'.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .menu
    var stickyNavTop = $('.menu').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('.menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.menu').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>


Bagaimana jika saya ingin menu itu muncul hanya setelah discroll? Jika tidak discroll menu tersebut tersembunyi.

Memunculkan/menampilkan Menu setelah discroll

Gunakan jQuery berikut untuk memunculkan/menampilkan menu hanya setelah halaman discroll.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .menu
    var stickyNavTop = $('.menu').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('.menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.menu').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>




Selamat belajar :)

COMMENTS

BLOGGER: 9

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Elemen-DIV Diam setelah discroll atau Menu Melayang
Elemen-DIV Diam setelah discroll atau Menu Melayang
Membuat menu melayang setelah discroll menggunakan jQuery. Menu diam atau melengket setelah laman digulung.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicn9QpU3WWD6ItfKN7VA5MZyiWnntGiIAm0W91U69yAtjkQ6qhIl_HgAN628GgGZvqkbZ04DnM9ybVe8s1yUKMCSdgaePeybRfRsczQ4PlMVsMsXsrTYREPo0rujtR9FeRewCm-UGeak4/s1600/sticky-menu-saat-discroll.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicn9QpU3WWD6ItfKN7VA5MZyiWnntGiIAm0W91U69yAtjkQ6qhIl_HgAN628GgGZvqkbZ04DnM9ybVe8s1yUKMCSdgaePeybRfRsczQ4PlMVsMsXsrTYREPo0rujtR9FeRewCm-UGeak4/s72-c/sticky-menu-saat-discroll.png
Jelas in Blog
https://jelasinblog.blogspot.com/2014/05/elemen-div-diam-setelah-discroll.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/05/elemen-div-diam-setelah-discroll.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content