Javascript ile Menümüzü En Üste Sabitleme

Turan
2 Haziran 2016 Perşembe
0

Merhaba Arkadaşlar bu makalemizde menümüzü sayfanın en başına nasıl sabitleyebiliriz onu inceleyeceğiz.

Menüyü yukarıya sabitleme sadece css ile yaptığımızda sürekli sayfanın ortasında kalır ve üst tarafında bir boşluk oluşur. Bu durumda javascript kullanarak sayfada aşağı doğru inildiği zamanı yakalayıp menümüzün bulunduğu div e bir yeni css ler atayacağız.Uygulamamızın detaylarına geçecek olursak;

Öncelikle sayfamıza bir jquery kütüphanesi eklememiz gerekir.Aksi takdirde html sayfamızda <script> tagları arasına yazdığımız kod çalışmayacaktır.

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Bu kod online bir şekilde jquery kütüphanesini sayfamıza eklememizi sağlar.

Sayfamızın tasarımını ve menü divlerimizi oluşturduktan sonra still dosyamıza yada sayfamızın still bölümüne divi yukarı sabitlemek için  'fix' adında bir css tanımlıyoruz

.fix{
    position:fixed;
    top:0;
    left:0;
    right:0;
    margin:0;
}

fix class ımız bu şekilde olacaktır.

Gelelim body tagları arasına  yazacağımız javascript koduna, burada önemli olan menü divimizin class adı ve en üste olan px değerindeki mesafesidir. 

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

Javascript kodumuzda bu şekilde olmalıdır. Menümüzün yukarıya olan mesafesi 50 px olduğunu varsayarsak, sayfamızın scroll değeri 50 den fazla olduğunda divimize yeni still yani '.fix' css ini eklediğimiz zaman menülerimiz yukarıya yapışacaktır. Burada '.menum' yazan bölümde menülerimizin içinde bulunduğu div classı verilmelidir.

Ugulamanın proje halini buraya tıklayarak indirebilirsin.

Kolay gelsin iyi çalışmalar.



Yorum yaz