| Autor | Zpráva | ||
|---|---|---|---|
| Mlocik97 Profil |
#1 · Zasláno: 30. 5. 2017, 00:22:38
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 |
#2 · Zasláno: 30. 5. 2017, 15:08:26
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 |
#3 · Zasláno: 30. 5. 2017, 15:55:28
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 |
#4 · Zasláno: 30. 5. 2017, 17:03:06
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 |
#6 · Zasláno: 30. 5. 2017, 20:03:25
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 |
#7 · Zasláno: 30. 5. 2017, 20:11:00
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 |
|||
|
Časová prodleva: 1 měsíc
|
|||
| 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());
} function resize() {
var el = $("nav#vertical, aside");
el.height($(document).height() - el.offset().top);
} resp. hodnotu shift chci pričitávať (ani tak nefunguje). |
||
| Dan Charousek Profil |
#10 · Zasláno: 5. 7. 2017, 20:35:58
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);
} */$('#header_parent').stop().animate({height: "100px"},0);Najbližšie som sa dostal k tomuto: function resize() {
var el = $('nav#vertical, aside');
var scrollTop = $(this).scrollTop();
el.height(el.height + (scrollTop || shift));
};Ani function resize() {
var el = $('nav#vertical, aside');
var scrollTop = $(this).scrollTop();
el.height(el.height() + (scrollTop || shift));
};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"
})
}); |
||
|
Časová prodleva: 9 dní
|
|||
| 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));
})
}) |
||
|
Časová prodleva: 7 let
|
|||
0