Arkadaşlar Herkese kolay gelsin.
ben bir blog sitesi hazırlıyorum
headerimi sabitledim. aşağı doğrı inilince headerimin üzerine aynı yükseklikte bir menü açılmasını istiyorum. bu menüye blog yazısını paylaşmak için sosyalmedya ikonlarını koymak istiyorum.
daha sonra yukarı scroll edilincede kaybolmasını istiyorum. araştırdım bulamadım fixed header örnekleri var hep
örnek şu site
http://ozwebtasarim.com/
Aşağı Scroll Edilince Fixed Header Üzerinde çıkan yeni Menü |
12 Mesajlar | 4.430 Okunma | ||
- Üyelik 24.05.2017
- Yaş/Cinsiyet 29 / E
- Meslek Öğrenci
- Konum Konya
- Ad Soyad B** B**
- Mesajlar 77
- Beğeniler 14 / 2
- Ticaret 0, (%0)
- Üyelik 18.11.2011
- Yaş/Cinsiyet 35 / E
- Meslek Web Developer
- Konum İstanbul Avrupa
- Ad Soyad B** Ç**
- Mesajlar 3270
- Beğeniler 1014 / 1983
- Ticaret 53, (%100)
Araştırıp forumda konuyu bulmuşsunuz aslında, orada verdiğim cevabı aynen buraya yapıştırayım.
Aşağıdaki verdiğim linkleri bir inceleyin. JS ile yapılmış.
http://jsfiddle.net/uFq2k/
http://jsfiddle.net/a42qB/
Aşağıdaki verdiğim linkleri bir inceleyin. JS ile yapılmış.
http://jsfiddle.net/uFq2k/
http://jsfiddle.net/a42qB/
- Üyelik 24.05.2017
- Yaş/Cinsiyet 29 / E
- Meslek Öğrenci
- Konum Konya
- Ad Soyad B** B**
- Mesajlar 77
- Beğeniler 14 / 2
- Ticaret 0, (%0)
Kardeş ben bakmıştım onlara ama istediğim değil onlar
senin paylaştıklarında normal header yukarı yapışıyor. benim dediğimde ise yapışkan headerin üerine yeni bir menü geliyor. o üstte link verdim ben.
yani iki tane header olacak biri sabit diğeri aşağı inince sabitin üzerine çıkacak
senin paylaştıklarında normal header yukarı yapışıyor. benim dediğimde ise yapışkan headerin üerine yeni bir menü geliyor. o üstte link verdim ben.
yani iki tane header olacak biri sabit diğeri aşağı inince sabitin üzerine çıkacak
- Üyelik 11.07.2017
- Yaş/Cinsiyet 26 / E
- Meslek Öğrenci
- Konum İstanbul Avrupa
- Ad Soyad E** K**
- Mesajlar 169
- Beğeniler 8 / 45
- Ticaret 1, (%100)
Ben sitede sadece header'ın sticky olduğunu görüyorum. Siz neden bahsediyorsunuz tam olarak?
- Üyelik 24.05.2017
- Yaş/Cinsiyet 29 / E
- Meslek Öğrenci
- Konum Konya
- Ad Soyad B** B**
- Mesajlar 77
- Beğeniler 14 / 2
- Ticaret 0, (%0)
dostum şöyle anlatayım sana
Şimdi normal position:fixed bir headerim var. tamam mı haber okuma sayfası yanı article sayfasına girince yine headerim position:fixed durumunda
ancak haberi okuyarak aşağı inince normal fixed headerin üzerine yukardan yeni bir header inecek.
bu headerde ise solkısımda sosyal paylaşım ikonları sağ kısımda da sonraki haber linki olacak
bu şekilde yapmaya çalışıyorum.
Şimdi normal position:fixed bir headerim var. tamam mı haber okuma sayfası yanı article sayfasına girince yine headerim position:fixed durumunda
ancak haberi okuyarak aşağı inince normal fixed headerin üzerine yukardan yeni bir header inecek.
bu headerde ise solkısımda sosyal paylaşım ikonları sağ kısımda da sonraki haber linki olacak
bu şekilde yapmaya çalışıyorum.
- Üyelik 24.05.2017
- Yaş/Cinsiyet 29 / E
- Meslek Öğrenci
- Konum Konya
- Ad Soyad B** B**
- Mesajlar 77
- Beğeniler 14 / 2
- Ticaret 0, (%0)
yukardaki linkte inen header için örnek var oyüzden koydum onu
- Üyelik 11.07.2017
- Yaş/Cinsiyet 26 / E
- Meslek Öğrenci
- Konum İstanbul Avrupa
- Ad Soyad E** K**
- Mesajlar 169
- Beğeniler 8 / 45
- Ticaret 1, (%100)
Yanlış anlamadıysam şöyle bir şeyden bahsediyorsunuz
https://jsfiddle.net/ERENKYI/zsjx6fmv/2/ - Üyelik 24.05.2017
- Yaş/Cinsiyet 29 / E
- Meslek Öğrenci
- Konum Konya
- Ad Soyad B** B**
- Mesajlar 77
- Beğeniler 14 / 2
- Ticaret 0, (%0)
Aynen Kardeşim..
ÇOK SAOL
BENDE AYNISINI YAPTIM KENDİ BAŞIMA ARAŞTIRA ARAŞTIRA
ANCAK BİR SORUN VAR BENDE ÇÖZEMEDİM BUNU SENİN PAYLAŞTIĞINDA DA AYNISI VAR
Scroll etmeye başladıktan hemen sonra çıkmasını istıyorum aynı zamanda yukarı scrool edince de hemen kaybolmasını istiyorum sayfanın en altında dahi olsam seninkinde de benimkinde de aynı sorun var onu nasıl halledeceğiz bide geçişler yavaşlatmak için transform kodunu mu kullanacağız.
ÇOK SAOL
BENDE AYNISINI YAPTIM KENDİ BAŞIMA ARAŞTIRA ARAŞTIRA
ANCAK BİR SORUN VAR BENDE ÇÖZEMEDİM BUNU SENİN PAYLAŞTIĞINDA DA AYNISI VAR
Scroll etmeye başladıktan hemen sonra çıkmasını istıyorum aynı zamanda yukarı scrool edince de hemen kaybolmasını istiyorum sayfanın en altında dahi olsam seninkinde de benimkinde de aynı sorun var onu nasıl halledeceğiz bide geçişler yavaşlatmak için transform kodunu mu kullanacağız.
- Üyelik 24.05.2017
- Yaş/Cinsiyet 29 / E
- Meslek Öğrenci
- Konum Konya
- Ad Soyad B** B**
- Mesajlar 77
- Beğeniler 14 / 2
- Ticaret 0, (%0)
Yanlış anlamadıysam şöyle bir şeyden bahsediyorsunuz
https://jsfiddle.net/ERENKYI/zsjx6fmv/1/http://jsfiddle.net/a42qB/381/
şuna bir bakabilirmisin bunuda ben yaptım kardeş
- Üyelik 11.07.2017
- Yaş/Cinsiyet 26 / E
- Meslek Öğrenci
- Konum İstanbul Avrupa
- Ad Soyad E** K**
- Mesajlar 169
- Beğeniler 8 / 45
- Ticaret 1, (%100)
Eğer haber kısmına gelmeden belirli bir miktar kaydırdıktan sonra göstermek istiyorsanız
$(this).scrollTop() >= $('#haber-baslangici').offset().top
kısmını
$(this).scrollTop() >= 50
şeklinde değiştirin.
Eğer ana headerı gizleyip farklı bir header göstermek istiyorsanız header elementini kopyalayarak sticky-header gibi bir class ekleyin ve javascripti ona göre düzenleyin. Ama diğer headerı kullanmayacaksanız boşuna sayfada DOM kirliliği yapmayın, bir header içine 2 farklı header içeriği koyun ve benim yaptığım gibi sadece onları gizleyip gösterin. Eğer içerik değiştiğinde CSS'i de değiştirmek istiyorsanız jQuery'nin addClass ve removeClass özelliğini kullanın.
$(this).scrollTop() >= $('#haber-baslangici').offset().top
kısmını
$(this).scrollTop() >= 50
şeklinde değiştirin.
Eğer ana headerı gizleyip farklı bir header göstermek istiyorsanız header elementini kopyalayarak sticky-header gibi bir class ekleyin ve javascripti ona göre düzenleyin. Ama diğer headerı kullanmayacaksanız boşuna sayfada DOM kirliliği yapmayın, bir header içine 2 farklı header içeriği koyun ve benim yaptığım gibi sadece onları gizleyip gösterin. Eğer içerik değiştiğinde CSS'i de değiştirmek istiyorsanız jQuery'nin addClass ve removeClass özelliğini kullanın.
Konuyu toplam 2 kişi okuyor. (0 kullanıcı ve 2 misafir)