Menüyü Sabitleme CSS+JQUERY

Selam! yeni bir konuyla yine buralardayım.  Bugünkü konumuz çoğu sitede bulunan scrollbar’ı aşağı indirdiğimizde menüyü  üste sabitleme olayının nasıl yapıldığını anlatacağım.

 Jquery kodları

<script type="text/javascript">
  $ (document) .ready (function () { 
            $ (window) .scroll (function () { 
                if ($ (this) .scrollTop ()> 200) { 
                    $ ('.menu').addClass ('sabitleme'); 
                } else {
                    $('.menu').removeClass('sabitleme');
                }
            });
        });
 
</script>

scrollbar’ı  yukarıdan 300px indirdiğimiz zaman  menüyü  üste sabitlemeyi sağlayan jquery kodumuz bu şekilde  sitenize veya tasarımlarınıza göre azaltır veya arttırabilirsiniz kodumuzdaki sabitleme class’ının CSS kodları

.sabitleme{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10000;
		width: 100%;
		left:0;
		right: 0;
		z-index: 99999;
		}

Z-index’i ekleme sebebim menü üste yapıştığı zaman aşağı indikçe divlerin  altında  kalıyordu bunu çözmek için z-index değerini:999 yaptım. Html bölümünde sabitleme classını yazmanıza gerek yok sadece css’e yazıp onu öyle bırakın ve jquery kodumu yazın işlem gerçekleşmiş olacak.

projenin demosuna burdan ulaşabilirsiniz :  https://codepen.io/UnsalGel/pen/oNvJZVd

Bugünkü konumuz olan Menüyü üste yapıştırmak (Menüyü Sabitleme)  bu kadar  sorularınız olursa iletişim bölümünden veya sosyal  medya hesaplarımdan bana ulaşabilirsiniz.