Site header alanını belirli konuma geldikten sonra sabitleme

Son dönemde web sitelerinde sıkça gördüğümüz belirli konuma geldikten sonra header alanının sabitlenmesinden bahsedeceğim.

öncelikle bu iş için ajax kod kütüphanemizi

<head></head>  

etiketleri arasına ekliyoruz

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

bunu yaptıktan sonra ajax kodumuzu ayarlayalım ajax kodumuz:

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

yukarda gördüğünüz

50

rakamı tarayıcınızın yukardan aşağıya 50 px değeridir. bu alan body ile nav arasındaki alan olarakta belirlenebilir.
bu alanı arzu ettiğiniz gibi değiştirebilirsiniz.

$(‘.menu’)

classımızı belirlemektedir. sabit tutmak istediğimiz class yada id ile değiştirmeliyiz.
bu düzeltmelerden sonra bir stil alanı oluşturacağız

<style> .fix { position:fixed; top:0; left:0; right:0; margin:0; } </style> 

bu fix alanı belirttiğimiz konuma geldiğimizde belirlediğimiz classın içine eklenecek ve konumumuzu en üste sabitleyecektir.

anlatımımız bukadar.
görüşmek dileğiyle.

  • Memet Aktan

    bunu wordpress’e nasıl ekleyeceğiz?
    Wordpresste yeniym.

    • Ö. Doğan

      Temanızın ilgili bölümlerine ekleyebilirsiniz