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.

“Site header alanını belirli konuma geldikten sonra sabitleme” üzerine 2 yorum

Bir Cevap Yazın