Cara Memasang Plugin Sticky Menu Scroll

Di dalam perkembang dunia website sekarang banyak orang menuntut agar website yang di akses cepat mudah dan menarik, karena dengan website yang menarik otomatis akan menarik para pengunjung website kita juga, mengapa demikian yah memang sudah jadi patokannya, website yang menarik pasti akan banyak pengunjungnya. ketika kita membuat website, begitu orang melihat tampilan website kita tidak menarik dan susah diakses maka kita dikatakan gagal membuat website.

Berbicara membuat website menarik kali ini saya akan membahas tentang Â Cara Memasang Plugin Sticky Menu Scroll , apa sihÂ Plugin Sticky Menu Scroll, kalau diartikan seperti menu yang menempel atau lengket, maksudnya adalah ketika kita men-scroll tampilan website kita ke bawah maka tampilan pada bagian menu kita tidak akan hilang dia tetap akan tampil pada posisi atas website kita.

Oke untuk lebih jelasnya saya akan memberikan contohnya langsung, silahkan teman – teman copy paste script di bawah ini.
pertama buat file htmlnya terlebih dahulu dan simpan dengan nama bebas lihat script di bawah ini;

<html>
  <head>
    <title> STICKY</title>
<link href="css.css" rel="stylesheet">
  </head>


<body>
  <header>
    <div class="title"><h4>CONTOH STICKY MENU  SCROLL!</h4></div>
    <div class="subtitle"><h5> OH YES </h5></div>
    <div class="sticky">HOME ABOUT-US  PORTOFOLIO  BLOG  CONTACT-US</div>
    

</header>

<div class="content" style="height: 500px; background: red">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
 
</div>
<div class="content" style="height: 500px; background: green">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
 
</div>
<div class="content" style="height: 500px; background: orange">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
 
</div>
<div class="content" style="height: 500px; background: blue">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
 
</div>

  
</body>
</html>

Oke kalau sudah silahkan buat script css berikut dan simpan dengan nama bebas, untuk fungsi cssnya silahkan lihat dibawah ini;

* {font-family:arial; margin:0; padding:0;}
.title {font-size:40px; font-weight:bold;color:#00a; font-style:italic; text-align: center}
.subtitle {color:#777; font-style:italic; margin:10px 0; text-align: center}
.sticky {background:#0dc501; color:#fff; height:40px; line-height:40px;letter-spacing:1px; width:100%; text-align:center;}
.content {margin-top:10px;}

.content {padding:10px;}
.content p {margin-bottom:20px;}	
p {width: 300px; color:white; text-align: center; margin: auto
}

Oke kalau sudah silahkan simak lagi, kita akan menghubungkan atau me-load fungsi jquery.min.js nya letakkan di dalam tag <head> dan </head>

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<!-- <script src="styky/jquery.stickyNavbar.min.js"></script>
 -->

Sekarang kita akan memasang fungsi Â dariÂ Plugin Sticky Menu nya sendiri, silahkan letakkan script di bawahÂ di paling bawah di atas tag body ;

<script>
        // Create a clone of the menu, right next to original.
    $('.sticky').addClass('original').clone().insertAfter('.sticky').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

    scrollIntervalID = setInterval(stickIt, 10);


    function stickIt() {

      var orgElementPos = $('.original').offset();
      orgElementTop = orgElementPos.top;               

      if ($(window).scrollTop() >= (orgElementTop)) {
        // scrolled past the original position; now only show the cloned, sticky element.

        // Cloned element should always have same left position and width as original element.     
        orgElement = $('.original');
        coordsOrgElement = orgElement.offset();
        leftOrgElement = coordsOrgElement.left;  
        widthOrgElement = orgElement.css('width');
        $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
        $('.original').css('visibility','hidden');
      } else {
        // not scrolled past the menu; only show the original menu.
        $('.cloned').hide();
        $('.original').css('visibility','visible');
      }
    }
</script>

Oke kalau sudah silah save dan jalan pada browsernya, selamat mencoba. Oke itulah tadi pembahasan saya tentangÂ Cara Memasang Plugin Sticky Menu Scroll, semoga bermanfaat.

Cara Memasang Plugin Sticky Menu Scroll

Kategori