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