Kategoriler
CSS

CSS ile yapışkan nesne oluşturmak

Bir çok web sitede kaydırma çubuğunu aşağı çektikçe bazı nesnelerin üste sabit durduğunu görürsünüz. Bu işlemin mantığı kaydırma çubuğunu belirli bir seviyeye geldiğinde nesne pozisyonu sabit kalır. Bunu javascript ile yapabileceğiniz gibi css ile çok basit bir şekilde yapabilirsiniz. Bu işlem için CSS’in olanak sağladığı sticky elemanı ile yapabilirsiniz.

Yapışkan özelliğe sahip olmasını istediğiniz nesneye position özelliğine sticky değeri vermeniz yeterlidir;

[code]<style>
.sticky {
position: sticky;
top: 0;
background-color: green;
padding: 50px;
font-size: 25px;
}
</style>
<div class=”sticky”>Kaydırma pozisyonuna ulaştığınızda ekrana yapışacak olan nesne</div>[/code]