Scrool Aşağı Hareket Edince Görünen Div

Sayfa yüklendiğinde görünmeyen fakat scrool aşağıya hareket ettiğinde ortaya çıkan bir div oluşturmak için bir çok örnek aradım günlerce jquery ve js kullanımından dolayı bir çok örnek tam anlamıyla istediğim şeyi karşılayamadı. En son Tayfun Erbilen isimli arkadaşın uzmancevap’ta bir soruya vermiş olduğu cevapta buldum istediğim kodu.

Bu konularda Türkçe forumlarda çok fazla bilgi bulabilmek mümkün değil. Blogları takip etmek gerekiyor.

HTML
[html]
<div class="fixed-bar">
burası sonradan gözükecek..
</div>

scroll’u aşağı doğru kaydırın..[/html]

CSS
[css]

.fixed-bar {
position: fixed;
top: -50px;
left: 0;
width: 100%;
height: 50px;
background: #333;
color: #fff;
transition: all 300ms;
}
.fixed-bar.open {
top: 0;
}

body {
height: 3000px;
}
[/css]

JS

[code lang=”js”]
$(window).scroll(function(){
console.log($(this).scrollTop());
if ( $(this).scrollTop() > 100 ){
$(‘.fixed-bar’).addClass(‘open’);
} else {
$(‘.fixed-bar’).removeClass(‘open’);
}
});

[/code]

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir