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]
15 Ocak 2015
Benzer yazılar
Henüz yorum yapılmamış
Son Yorumlar
Allah yar ve yardımcın olsun kardeşim : ) Altın-dolar'ı bırak doğalgaz-pe...
Tamam yani 2020 kötü geçer diyordum da bu kadarı da biraz fazla mı oldu ne ...
Bu nasıl bir analiz bu nasıl bir öngörü be kardeşim :) 2015 sönük kaldı...
Böylesi bir güzelliği illa da Batı'lı bir şahsiyet tanınmlayan zihniyet z...
Bu aslında biraz da çocukların toplumsal hayatın merkezine yerleşmesi ile i...