Cara Menciptakan Sajian Blog Sticky Dikala Di Scroll

Sticky Menu biasanya identik dengan hidangan yang apabila konten website di scroll maka posisi hidangan seolah berubah atau jadi floating, dimana hidangan tersebut akan tetap terlihat atau jadi fixed meskipun kita melaksanakan scroll, tentu ini sangat tidak sama dengan hidangan biasa karena hidangan biasa posisi menunya tidak akan terlihat ketika user melaksanakan scroll.

Konsep ini tentunya tidak sama ibarat Membuat Header Website Fixed Tidak Bergerak Saat di Scroll alasannya yakni disini kita melibatkan Javascript

Percobaan kali ini akan saya lakukan / terapkan pada template Evo Magz. Untuk membuat sticky hidangan blog ketika di scroll ini mungkin akan saya bagi keadalam tiga bab yaitu

Pembuatan CSS/Style untuk menu
Pembuatan Media Queris/Screen untuk Tampilan Responsive menunya, pembuatan hidangan responsive ini pernah dibahas pada artikel Teknik Membuat Tampilan Navigasi Menu Website Responsive
Penambahan Javascript Untuk Merubah Secara Otomatis Kaprikornus Fixed Ketika di Scroll
Menempatkan Menu

*Catatan
Untuk membuat hidangan ini Anda memerlukan jquery, silahkan menambahkan <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
diatas instruksi </head>

Berikut ini yakni Teknik Membuat Menu Blog Sticky Ketika di Scroll

#TAHAP PERTAMA

Cari script <b:skin><![CDATA[/* dan menambahkan susunan CSS diberikut dibawahnya, atau cari script ]]></b:skin>

 <!-- Menu Fixed If Scroll By Ahmad Sigarantang --> #menuluhur{width:100%;max-width:996px;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;} #menuluhur ul,#menuluhur li{margin:0;padding:0;list-style:none;} #menuluhur ul{height:45px} #menuluhur li{float:left;display:inline;position:relative;font-family:'Open Sans';font-size:12px; font-weight:bold;} #menuluhur a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#919392;} #menuluhur ul li:hover a{color:#666;} #menuluhur input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer} #menuluhur label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;} #menuluhur label span{font-size:13px;position:absolute;left:35px} #menuluhur ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392} #menuluhur ul li ul li a{color:#919392;height:45px;line-height:45px;background:#fff;width:100%;} #menuluhur ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;} #menuluhur li:hover > ul.menux{visibility:visible;opacity:1;top:45px;} #menuluhur a.dutt{padding:0 27px 0 14px} #menuluhur a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;} #menuluhur a.dutt:hover::after,#menuluhur ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;} #menuluhur ul.menux li a{background:#fff;color:#919392;} #menuluhur ul li ul li a:hover{background:#fcfcfc;color:#8493a0;} #menuluhur li.facebook {padding:0 5px;} #menuluhur li.facebook,#menuluhur li.twitter,#menuluhur li.youtube,#menuluhur li.googleplus,#menuluhur li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;} #menuluhur li a.facebook:hover,#menuluhur li a.twitter:hover,#menuluhur li a.youtube:hover,#menuluhur li a.googleplus:hover,#menuluhur li a.linkedin:hover{color:#8493a0;} #menuluhur li.facebook .fa.fa-facebook,#menuluhur li.twitter .fa.fa-twitter,#menuluhur li.youtube .fa.fa-youtube,#menuluhur li.googleplus .fa.fa-google-plus,#menuluhur li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;} #menuluhur li.facebook:hover,#menuluhur li.twitter:hover,#menuluhur li.youtube:hover, #menuluhur li.googleplus:hover,#menuluhur li.linkedin:hover{background:#fcfcfc;color:#8493a0;} #menuluhur li.facebook:hover .fa.fa-facebook,#menuluhur li.twitter:hover .fa.fa-twitter,#menuluhur li.youtube:hover .fa.fa-youtube,#menuluhur li.googleplus:hover .fa.fa-google-plus,#menuluhur li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}

#TAHAP KEDUA

Selanjutnya kita menambahkan media queris biar tampilan menunya jadi responsive, menambahkan script css dibawah ini dibawah script CSS pada tahap pertama

<!--Menu Fixed If Scroll By Ahmad Sigarantang --> @media screen and (max-width:960px) { #menuluhur li:hover > ul.menux{display:block;} #menuluhur ul{border:none;border-bottom:4px solid #e9e9e9;} #menuluhur{position:relative;border:none;border-bottom:4px solid #e9e9e9;} #menuluhur ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;} #menuluhur ul.menux{width:100%;position:static;border:none} #menuluhur li{display:block;float:none;width:auto;text-align:left} #menuluhur li a{color:#666} #menuluhur li a:hover{background:#f1f1f1;color:#f9f9f9} #menuluhur li:hover{background:#8493a0;color:#fff;} #menuluhur a.dutt{font-weight: bold;} #menuluhur li:hover > a.dutt,#menuluhur a.dutt:hover{background:#b1b1b1;color:#fff;} #menuluhur input,#menuluhur label{display:inline-block;position:absolute;right:0;top:0;} #menuluhur input:after,#menuluhur label:after {content:"\f0c9";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666; display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;} #menuluhur input{z-index:4;} #menuluhur input:checked + label{color:#fff;font-weight:700} #menuluhur input:checked   ul{display:block} #menuluhur ul li ul li a{width:100%;color:#666;} #menuluhur ul li ul li a:hover{background:#8493a0;color:#fff;} #menuluhur ul.menux a{background:#fff;color:#666;} #menuluhur ul.menux a:hover{background:#8493a0;color:#fff;} #menuluhur ul.menux li{background:#fff;color:#666;} #menuluhur ul.menux li:hover{background:#8493a0;color:#fff;} #menuluhur ul.menux li a{background:#fff;color:#666;} #menuluhur ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}

#TAHAP KETIGA

Tahap ketiga yaitu membuat javascript untuk merubah class dari menuluhur yang tadinya posisinya relatif jadi fixed ketika di scroll, menambahkan script dibawah ini, terserah menaruhnya mau dimana, yang penting script tersebut ditaruh didalam body, disini saya menaruhnya dibawah footer

<script type='text/javascript'> //<![CDATA[ $(document).ready(function() {     var stickyNavTop = $('#menuluhur').offset().top;     var stickyNav = function(){         var scrollTop = $(window).scrollTop();          if (scrollTop > stickyNavTop) {             $('#menuluhur').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });         } else {             $('#menuluhur').css({ 'position': 'relative' });         }     };     stickyNav();     $(window).scroll(function() {         stickyNav();     }); }); //]]> </script>

#TAHAP KEEMPAT

Tahap terkahir yakni menaruhnya pada bab menu, disini tentunya hidangan – hidangan pada masing – masing template yang dipakai tidak sama, jadi untuk penempatannya tidak akan saya jelaskan, pada dasarnya tempatkan pada bab hidangan yang ada didalam blog, disini saya memakai eco magz, jadi saya menghapus bab secondary hidangan dengan class menuluhur, diberikut pola scriptnya

<nav id='menuluhur'>          <input type='checkbox'/></input> <label></label>        <ul>      <li><a href='#'>Ahmad</a></li>      <li><a href='#'>Ganteng </a></li>      <li><a href='#'>Sekali</a></li>      <li><a href='#'>Sejak</a></li>       <li><a href='#'>Lahir</a></li>        </ul>           </nav>

Silahkan Lihat pola balasannya dibawah