[es] - Fixed nav bar kada scroll-ujem stranicu ???

respectzr

Član broj: 301212
Poruke: 33

+2 Profil

Fixed nav bar kada scroll-ujem stranicu ???

^{26.03.2012. u 18:10 - pre 159 meseci}

Pozdrav,

Evo rešio sam da promenim header na svom blogu pa me muči traka sa kategorijama

Hoću da namestim da kada se skorluje blog i ta traka sa kategorijama "udari" u gornju ivicu browsera ostane fixirana i tako tu stoji koliko god skrolujes dole..

Postoji prost css kod: position:fixed; ali to prikači kategorije stalno pa kada skrolujem, kategorije prelaze preko headera.. ja zelim da kada se skroluje, da se pomeraju i header i kategorije ZAJEDNO, a kada kategorije "udare" u gornju ivicu browsera, da ostane gore a header da ode... dakle da na vrhu stoje kategorije koliko god skorlovao dole.. nadam se da ste razumeli..

Moj blog je http://saznaj-novo.uz.rs/ pa možete videti kako sve to statično izgleda... videcete te kategorije... ta traka sa kategorijama.. e to zelim da se fixira kad se skroluje..

da napomenem, CSS znam po prilično kao i HTML, jquery, JS.. skoro nista..

Ako neko nekako moze da mi pomogne, bilo sta, neki kodovi, objasnjenja.. brzo kapiram nece biti tesko da mi se objasni :P

... dosta sam se mučio i nikako da uspem :/

Hvala svima.

Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: Fixed nav bar kada scroll-ujem stranicu ???

^{27.03.2012. u 04:40 - pre 159 meseci}

Za to ti treba javascript. Poenta je da pratis scroll dogadjaj i kada scrollTop predje inicijalnu poziciju elementa koji zelis da ti bude fixiran treba da promenis position tog elementa u fixed, a kada scrollTop bude <= od te inicijalne pozicije vratis mu position na predhodno stanje.

Ako koristis jQuery na strani mozes jednostavno da dodas ovaj kod:

Code (javascript):

jQuery(function($)) {    

   $('.fixedposonscroll').each(function() {

        var self = $(this), w, width = self.width(), 

             offsetY = self.offset().top - self.outerHeight() / 2;

        w = $(window).scroll(function() {

            if (w.scrollTop() >= offsetY) {

                self.css({position: 'fixed',top: 0,width: width,'z-index': 100});

            } else {

                self.css({position: 'relative'});

            }

        });

    });

});

i onda samo dodas fixedposonscroll klasu na element koji zelis da bude fixiran onscroll.

rafforum.rs - Forum Računarskog Fakulteta

Odgovor na temu

respectzr

Član broj: 301212
Poruke: 33

+2 Profil

Re: Fixed nav bar kada scroll-ujem stranicu ???

^{27.03.2012. u 14:22 - pre 159 meseci}

Rekoh da se u jquery i js jako slabo snalazim..mislim da ne koristim jquery na stranici.. nikad nista nisam ubacivao.. ako mozes da mi pomognem kako da ubacim?? Ja koristim wordpress (sto si verovatno i sam zakljucio) pa sad gde tacno da ubacim taj Kod sto si mi napisao?? Našao sam red u style.css gde je ta navigaciona traka, treba tu nesto? I u index.php sam nasao red gde je ta nav traka.. treba li i tu nesto?? Poseban fajl(folder) sa tom nav trakom nemam.. ne znam jquery i js pa zato mi tesko da se snadjem.. da je obican css vec bi bilo gotovo.. zato sam dosao ovde da pitam.. hvala

Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: Fixed nav bar kada scroll-ujem stranicu ???

^{28.03.2012. u 14:52 - pre 159 meseci}

aha, nisam obracao paznju sta je "ispod haube", a wordpress tj ova tema koju koristis vec ima includeovan jquery, sto znaci da ti samo treba da dodas ovaj script, recimo odmah ispred </body> dodaj ovo:

Code (html):

<script>

jQuery(function($)) {    

   $('.fixedposonscroll').each(function() {

        var self = $(this), w, width = self.width(), 

             offsetY = self.offset().top - self.outerHeight() / 2;

        w = $(window).scroll(function() {

            if (w.scrollTop() >= offsetY) {

                self.css({position: 'fixed',top: 0,width: width,'z-index': 100});

            } else {

                self.css({position: 'relative'});

            }

        });

    });

});

</script>

i onda nadji gde ti je ta navigaciona traka u kodu (to ti je valjda ovaj <div id="cat_navi" class="wrap">) i dodaj joj klasu fixedposonscroll.
Samo sto ako jeste u pitanju ovaj cat_navi, nece ti odgovarati jer je to samo centralni deo strane, tebi treba puna sirina (pretpostavljam), tako da ces morati malo da restruktuiras html/css...

rafforum.rs - Forum Računarskog Fakulteta

Odgovor na temu