CSS navbar - R10.net

26-02-2018, 22:40:00

Merhaba arkadaslar
Asagidaki sitedeki gibi navbar yapamadim yardimci olurmusunuz.
Hem Pc icin hemde mobile uyumlu ve Site sayfayi asagiya indirince transparent oluyor yukari cikildifinda farkli baclgraund oluyor.

http://template.ridianur.com/brehoh/...und/index.html

26-02-2018, 22:46:37

#2

CoderArgon

Kimlik doğrulama veya yönetimden onay bekliyor.

javascript scroll fonksiyonun kullacansın burada scroll 10 dan küçükse devreye girecek şekilde yazacaksın sonra sı css kodları
Biraz Araştırırsan Yapabilirsin Gerçekten Çok Zor Değil
Örnek Olarak Aşağıdaki Kodları İncelleyebilirsin

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop < 10 || document.documentElement.scrollTop < 10) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
}

26-02-2018, 22:53:00

#3

mehmetarik

CoderArgon adlı üyeden alıntı: mesajı görüntüle

javascript scroll fonksiyonun kullacansın burada scroll 10 dan küçükse devreye girecek şekilde yazacaksın sonra sı css kodları
Biraz Araştırırsan Yapabilirsin Gerçekten Çok Zor Değil
Örnek Olarak Aşağıdaki Kodları İncelleyebilirsin
window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop < 10 || document.documentElement.scrollTop < 10) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-50px"; } }

Ustam büyük ihtimal kopyala yapıştır yapmışsın. Bu kod event listener eklemeden JQuery'nin yeni versiyonlarında çalışmaz. Sorunsuz çalışacak kod bu şekilde olmalı:

document.addEventListener("scroll", function() {
if (window.pageYOffset > 10)document.getElementById('navbar').style.top = "0";
else     document.getElementById('navbar').style.top = "-150";
    
});

26-02-2018, 22:55:45

#4

CoderArgon

Doğrudur kardeşim Bende Bir Sıkıntı Çıkmadı Bugüne kadar ama doğru olanı kullanmak en iyisi bende öğrenmiş oldum

mehmetarik adlı üyeden alıntı: mesajı görüntüle

Ustam büyük ihtimal kopyala yapıştır yapmışsın. Bu kod event listener eklemeden JQuery'nin yeni versiyonlarında çalışmaz. Sorunsuz çalışacak kod bu şekilde olmalı:

document.addEventListener("scroll", function() {
if (window.pageYOffset > 10)document.getElementById('navbar').style.top = "0";
else     document.getElementById('navbar').style.top = "-150";
    
});

26-02-2018, 22:58:07

#5

Deliboran

Arkadaslar tesekkür ederim. Fakat yapamadim

27-02-2018, 14:45:06

#6

mehmetarik

CoderArgon adlı üyeden alıntı: mesajı görüntüle

Doğrudur kardeşim Bende Bir Sıkıntı Çıkmadı Bugüne kadar ama doğru olanı kullanmak en iyisi bende öğrenmiş oldum

Sen bilmiyorsun demek istemedim tabii hocam onu ekleyeyim. Örnek olsun diye kopyala yapıştır yapmışsındır demek istedim aslında.

27-02-2018, 23:19:39

#7

Deliboran

Arkadaslar sanirim bu tür navbar nasil yapildigini yaziyla paylasacak bir arkadas okumadi konuyu