Autor Zpráva
Mlocik97
Profil
github.com/Mlocik97/test

Viem že sa to robí cez transform scale() - size alebo transition? prípadne skrz JS. Ale nejak to neviem "zfunkčniť". Videl som to na jednom webe skrz padding, ja to potrebuju skrz height. Ako meniť hodnotu tak aby si to vždy bralo zvyšok, resp. pri scrollingu 0px "calc(100% - 150px);" pri scrollingu 10px "calc(100% - 140px);" atp až po scrolling 100px "calc(100% - 50px); a nasledne hodnota zostala, prípadne calc znova nahradiť iným riešením aby som v podstate bral výšku okna browsera - elementy na vrhu (hlavička a nav, nav sa ale ukotvuje na vrh, hlavička sa scrollne cez horný okraj) resp. aby to bralo "zvyšné volné miesto"... viď príklad, s tým že "to čierne" by malo siahať vždy až po spodný okraj okna browsera.


P.S.: Vím, sem hroznej, urobili ste mi už skoro 1/4 webu :D
Tomáš123
Profil
Mlocik97:
Ukážka riešenia v čistom CSS. Dve časti panela však nie sú nijako prepojené.

Príklad som nevidel. Nabudúce skús dodať ukážku, ktorú si nemusíme vlastnoručne prekopírovať.

na vrhu
Skôr vrchu :-)
Mlocik97
Profil
Nabudúce skús dodať ukážku, ktorú si nemusíme vlastnoručne prekopírovať.


Však nemusíte kopírovať.

jinak neviem či zrovna toto som chcel, totiž vyurčujete pevnú veľkosť, teda "tento div bude mať dĺžku 400px" napríklad, no problém je že ja neviem aká bude dĺžka okna prehliadača, alebo bude teda furt iná.

Jeden týpek mi už poradil niečo takéto, ale neviem to úplne sfunkčniť:

function isInSection(section)
    {
        var top = $(window).scrollTop();
        var bottom = top + $(window).height();
         var elementTop = $(section).offset().top;
         var elementBottom = elementTop + $(section).height();
           return (bottom >= elementTop && top <= elementBottom);
   }
Keeehi
Profil
Mlocik97:
Však nemusíte kopírovať.
Musíme. Protože prohlédnout si živou verzi přímo na gitu nemůžeme.
Mlocik97
Profil
Protože prohlédnout si živou verzi přímo na gitu nemůžeme.

můžete
Keeehi
Profil
Mlocik97:
Jo? A mohl bys nám říct jak?
Aby nedošlo k nedorozumění, kód samozřejmě vidíme, ale o ten nám nejde. Chceme vidět vyrenderovanou stránku.
Davex
Profil
Mlocik97:
můžete
Pokud chceš odkázat na živou ukázku, tak odkaž přímo na živou ukázku. Neodkazuj na seznam souborů, které živá ukázka obsahuje. Většina tam nebude hledat, jestli náhodou nějaký odkaz ve slepém místě nad seznamem nevede na živou ukázku.
Mlocik97
Profil
Davex:
je tam link hneď nad tým zoznamom súborov...

ale keď priamo tak: mlocik97.github.io/test
Mlocik97
Profil
Tak skoro mesiac som mal ntb v *** (zoskratovaná klávesnica) takže až teraz znovu píšem... prehladal som asi sto rôznych stackoverflow vlákien, a asi najbližšie som dospel k:

function resize() {
                    $('#nav#vertical, aside').height($(document).height() - $(shift).height());
                } 
alebo
function resize() {
                    var el = $("nav#vertical, aside");
                    el.height($(document).height() - el.offset().top);
                } 
ale ani jeden mi nefunguje. :/

resp. hodnotu shift chci pričitávať (ani tak nefunguje).
Dan Charousek
Profil
Mlocik97:
Popiš trochu podrobněji vlastními slovy, jaké funkcionality chceš dosáhnout a může se ti dostat lepší pomoci.
Mlocik97
Profil
Dan Charousek:
chci dosiahnuť toho že mám určitý div jeho height je napr. calc(100% - 150px); a chci spraviť to aby v prípade že od vrchu stránky som prescrolloval X pixelov, tak presne o tú hodnotu X sa zvätší div. Teda zmenší rozdiel oproti 100%. Príklad:


scrollingom som 0px od vrchu stránky = calc(100% - 150px);
                        1px                              calc(100% - 149px);
                        15px                            calc(100% - 135px);
                        90px                            calc(100% - 60px);
                        100px                          calc(100% - 50px);
            (plynulo o každý px)
            (jakmyle dosiahne scrolling 100px, element zmení position na fixed (z relative), vtedy sa height tiež "zafixuje" teda:)
                        150px                          calc(100% - 50px);
                        300px                          calc(100% - 50px);
                        a když scrollingom sa budem vraciať na vrch stránky tak presne opačne, resp, bude stejné tým že scrolling sa bere ako rozdiel medzi topom webstránky resp.
                        (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);

chápeš? presne o koľko px scrollnem dole o toľko px sa zvätší div, a o koľko scrollnem hore o toľko sa zmenší div, ale hranica je po 100px, nad touto hodnotou sa už veľkosť zafixuje (nemení). Teda to platí dokavať
(window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0); > 100
Mlocik97
Profil
Tak už som asi veľmi blízko riešenia:

ok, stále to reším a nejde to tak jak bych to potreboval. Zatím som sa len kus k tomu priblížil:

/*        function resize() {
                    $('#nav#vertical, aside').height($(document).height() + $(shift).height());
                } */
        /*        function resize() {
                    var el = $("nav#vertical, aside");
                    el.height($(document).height() - el.offset().top);
                } */
viem druhá časť je blbosť. Ešte som videl jedno riešenie ale nevhodné pre moju potrebu (i když dosť podobnú funkčnosť):

$('#header_parent').stop().animate({height: "100px"},0);
Problém je že toto nieje "plynulý" a priamo závislý na scrollingu. Scrollingom sa zavolá ale zvätšovanie sa už nekoná podľa pozície scrollu v scrollbare. Potrebujem "plynulé" riešenie priamo závyslé na scrollingu. Presne o koľko px prescrollujem toľko sa pričíta pixelov ku height k jeho pôvodnej hodnote definovanej v CSS.


Najbližšie som sa dostal k tomuto:

function resize() {
            var el = $('nav#vertical, aside');
            var scrollTop = $(this).scrollTop();
            el.height(el.height + (scrollTop || shift));
        };
moja vlastná spatlanina, ale nefunkčná.

Ani
function resize() {
            var el = $('nav#vertical, aside');
            var scrollTop = $(this).scrollTop();
            el.height(el.height() + (scrollTop || shift));
        };
nefunguje. ale myslím že som blízko.


A ani toto nefunguje:

function resize() {
            var el = $('nav#vertical, aside');
            el.height($(el.height() + ($(this).scrollTop() || shift)));
        };

(viem že je to napsané hodne matúce, v podstate ide ako som postupne svoj kód menil.


Mlocik97:
ešte jednu spatlaninu som vyskúšal, nefunčkná

$(window).scroll(function(){
     if (shift > 100) {
         $('nav#vertical, aside').css({
             'height': height
         });
     }
     else {
         height = 'height' - shift;
     }
     $('nav#verical, aside').css({
         'height': height + "px"
     })
 });
Mlocik97
Profil
tak mámto vyriešené:

$(document).ready(function () {
            var contentHeight = $('nav#vertical, aside').height();

            $(window).scroll(function () {
                var scrollTop = $(this).scrollTop();
                $('nav#vertical, aside').height(contentHeight + (shift || scrollTop));
            })
        })

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: