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 29.12.2014 15:22
 
Odpovědět 29.12.2014 15:18
Avatar
Ori
Člen
Avatar
Odpovídá na vclvjn
Ori: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
Fredep
Redaktor
Avatar
Odpovídá na vclvjn
Fredep: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í
+1 bodů
Řešení problému
Nahoru Odpovědět 29.12.2014 17:12
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
Samuel Illo
Redaktor
Avatar
Samuel Illo :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 29.12.2014 18:31
Nahoru Odpovědět 29.12.2014 18:31
www.samuelillo.com | www.github.com/lamka02sk
Avatar
Honza Bittner
Redaktor
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 29.12.2014 19:34
Nahoru Odpovědět 29.12.2014 19:33
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/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 Bandik
Člen
Avatar
Odpovídá na vclvjn
Matej Bandik: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.