Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
vclvjn
Člen
Avatar
vclvjn:29.12.2014 15:18

Ahoj :)
Mám WP šablonu http://theme-sphere.com/smart-mag/

A ten top-bar jak je nahoře jsem chtěl uchytit, aby při rolování zůstal na místě. Použil jsem tedy position fixed, což zafungovalo pouze částečně, protože to sice přestalo rolovat, ale částečně se to zobrazilo do loga (zmizelo tedy bílé pole nad logem). Když jsem zkusil dát záporný top, tak mi to zase uplně zmizelo z obrazovky. Pak mě ještě napadlo zvětšit výšku toho bílého pole, ale to je pak rozsekané v mobilu...

Nevíte někdo co stím, aby to zůstalo responsive?
Děkuji moc ;)

Editováno
 
Odpovědět
29.12.2014 15:18
Avatar
Ori I
Člen
Avatar
Odpovídá na vclvjn
Ori I:29.12.2014 15:36

keď dáš top:0 a potom si budeš pridávať(skús to so 120) koľko potrebuješ tak to bude fungovať.

 
Nahoru Odpovědět
29.12.2014 15:36
Avatar
vclvjn
Člen
Avatar
vclvjn:29.12.2014 15:49

Počkej ted nerozumim tedy. Když dám top:0 tak co potom budu přidávat?

 
Nahoru Odpovědět
29.12.2014 15:49
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na vclvjn
Neaktivní uživatel:29.12.2014 17:12

Když dáš něčemu fixní pozici, tak to překryje kus stránky. Proto nastav tělu stránky padding-top na výšku toho fixního menu, způsobí to, že se celá stránka posune a nic by se nemělo překrývat ;)

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
29.12.2014 17:12
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:29.12.2014 18:31

Myslím, že chceš urobiť sticky menu. Keďže si asi nováčik, tak najjednoduchšie to bude vyriešiť cez plugin, napr. http://stickyjs.com/ (ak sa ti nechce učiť) ale na tvojom mieste by som si pozrel nejaký tutoriál a naučil by som sa to robiť bez pluginu.

Editováno
Nahoru Odpovědět
29.12.2014 18:31
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na vclvjn
Honza Bittner:29.12.2014 19:33

Tady jsou kdyžtak sticky menu -> http://www.itnetwork.cz/…otova-reseni

// což je menu, které se ti "připne/přilepí" až na nějaké pozici...

Editováno
Nahoru Odpovědět
29.12.2014 19:33
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
vclvjn
Člen
Avatar
vclvjn:29.12.2014 21:12

Cau diky všem :)
Já sem menu již měl hotové, potřeboval jsem ho jen "fixovat". Padding-top mě nenapadl. Děkuji moc.

 
Nahoru Odpovědět
29.12.2014 21:12
Avatar
Matej
Člen
Avatar
Odpovídá na vclvjn
Matej:30.12.2014 22:48

Hádam to pomôže ;) skús to skopirovať a pozri sa čo to robí, potom si to podľa seba uprav :) stiahni si jquery knižnicu ( http://jquery.com/download/ ) a premenuj ju jquery.js aby to fungovalo ;)

<!DOCTYPE html>
<html ><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">



<style type="text/css">
html, body, .obsah {
  height: 1000px;
}

header {
  width: 100%;
  min-height: 100px;
  text-align: center;
}

nav {
  background-color: #808080;
  width: 80%;
  min-height: 45px;
}</style>
</head>

<body>
<div class="obsah">

    <nav style="top: 0px; position: relative;"></nav>
</div>
<script src="jquery.js"></script>


<script>
(function () {
    var nav = $('nav');
    var navOffset = nav.offset().top;
    $(window).scroll(function () {
        var winScroll = $(window).scrollTop();
        if (winScroll > navOffset) {
            nav.css({
                position: 'fixed',
                top: '0'
            });
        } else {
            nav.css({ position: 'relative' });
        }
        console.log('nav: ' + navOffset);
        console.log('win: ' + winScroll);
    });
}());
</script>
</body></html>
 
Nahoru Odpovědět
30.12.2014 22:48
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.