[ respectzr @ 26.03.2012. 18:10 ] @
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.
[ Aleksandar Ružičić @ 27.03.2012. 04:40 ] @
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.
[ respectzr @ 27.03.2012. 14:22 ] @
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
[ Aleksandar Ružičić @ 28.03.2012. 14:52 ] @
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...