Sales1 min read135 words

Jquery ile Sticky Bar Yapımı

Emir Eskici

PlusClouds Author

Cloud & SaaS

Jquery ile Sticky Bar Yapımı

Selamlar,

Bu blog yazımda sizlere basit ama bir o kadar hayat kurtaran bir örnek göstereceğim. Başlamadan önce size bahsetmem gereken Jquery’nin içerisinde bulunan ve bu örnekte kullanacağımız 2 adet metod var. Gelin bakalım bu 2 metod neymiş?

adClass()= Bu metod ile seçtiğimiz HTML öğesinin class attribute’una istediğimiz class’ı ekleyebiliriz.

removeClass()= Bu metod ile seçtiğimiz Html öğesinin class attribute’undan istediğimiz class isimlerini silebiliriz.

Metodları anladığımıza göre kodlarımıza geçebiliriz…

HTML

Sizlerle HTML kodlarını uzun bir şekilde paylaşmama gerek yok önemli olan class’ı belirtmek onun dışında tasarım size kalmış :)

Description

JQUERY

Description

Peki eklediğimiz class nerede?

Onuda şöyle göstereyim sizlere

CSS

CSS dosyama belirttiğim class’ı ekledim.

Description

position:fixed;=özelliğine sahip etiket, görüntü alanına göre konumlandırılmıştır, yani sayfa kaydırılmış olsa bile her zaman aynı yerde kalır. top, bottom, left ve right gibi özellikler, öğeyi konumlandırmak için kullanılır.

SONUÇ

Description

Herkese iyi haftalar…

Frequently Asked Questions

Bu yazıda sticky bar yapımında hangi iki jQuery metodu kullanılıyor?

adClass() ile seçtiğimiz HTML öğesinin class attribute’una istediğimiz class’ı ekleyebiliriz. removeClass() ile seçtiğimiz Html öğesinin class attribute’undan istediğimiz class isimlerini silebiliriz. Bu iki metod sınıf yönetimini basitçe göstermektedir.

adClass() ne işe yarar?

Bu metod ile seçtiğimiz HTML öğesinin class attribute’una istediğimiz class’ı ekleyebiliriz. Böylece öğenin stilini değiştirmek için sınıf eklemek mümkün olur. Yazıda bu fonksiyonun temel amacı sınıf eklemek olarak açıklanmıştır.

removeClass() ne işe yarar?

Bu metod ile seçtiğimiz Html öğesinin class attribute’undan istediğimiz class isimlerini silebiliriz. Böylece öğenin stilinden belirli sınıfları kaldırmış oluruz. Bu da tasarım üzerinde dinamik değişiklik yapmaya olanak tanır.

Position: fixed nedir ve sticky bar ile nasıl çalışır?

Position: fixed özelliğine sahip öğe, görüntü alanına göre konumlandırılır ve sayfa kaydırılsa bile aynı yerde kalır. top, bottom, left ve right gibi özellikler, öğeyi konumlandırmak için kullanılır.

Bu yazıda sticky bar için hangi konumlandırma kavramı kullanılıyor?

Sticky bar için position: fixed kavramı kullanılıyor. Böylece bar sayfa kaydırılsa bile ekranda sabit konumda kalır.

HTML ve CSS kısmı bu örnekte nasıl ele alınmış?

HTML bölümünde class’ı belirtmenin önemli olduğundan bahsediliyor ve tasarım size kalmış olarak ifade ediliyor. CSS dosyasına belirttiğim class’ı ekledim ifadesi de örneğin CSS tarafını gösteriyor.

Metotları anlamak için hangi adımlar izleniyor ve hangi bölümler yer alıyor?

Metodları anladığımıza göre kodlarımıza geçebiliriz ifadesiyle ilerleme mesajı veriliyor. Yazı ayrıca HTML, JQUERY ve CSS bölümlerinin basit bir örnek içinde nasıl bir araya geldiğini gösteriyor.

Jquery ile Sticky Bar Yapımı | PlusClouds Blog