| Autor | Zpráva | ||
|---|---|---|---|
| T-fon Profil |
#1 · Zasláno: 7. 2. 2016, 17:46:29
Dobrý den, potřeboval bych, aby se mi měnilo pozadí nebo barva BackToTop tlačítka, které bude přejíždět přes různé Divy nebo Section.
Jsem v jQuery spíš začátečník, tak jsem si zvládnul jen upravit řešení tak, aby se mi barva měnila dle pozice v pixelech: <script type='text/javascript'>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100 && $(this).scrollTop() <= 500) {
$('#scroll').fadeIn();
$('#scroll').addClass('modra');
} else if ($(this).scrollTop() > 500 && $(this).scrollTop() <= 1000) {
$('#scroll').addClass('cervena');
} else if ($(this).scrollTop() > 1000) {
$('#scroll').addClass('zelena');
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script> |
||
| RastyAmateur Profil |
Vyzkoušel bych ty číslice zaměnit za offset() elementů (přičemž spodní okraj vypočteš tím, že přičteš výšku elementu (bacha na padding a margin)).
|
||
| T-fon Profil |
#3 · Zasláno: 7. 2. 2016, 19:02:43
Díky, je tohle správný zápis? Teda počítám že ne, když mi nefunguje...
$(document).ready(function(){
var offset1 = $('#section1').offset();
$(window).scroll(function(){
if ($(this).scrollTop() > offset1) {
$('#scroll').fadeIn();
$('#scroll').addClass('modra');
... |
||
| RastyAmateur Profil |
#4 · Zasláno: 7. 2. 2016, 19:31:33
T-fon:
Vyzkoušej offset1.top |
||
| T-fon Profil |
#5 · Zasláno: 7. 2. 2016, 20:30:56
Funguje, ale došlo mi, že vlastně řeším trochu něco jiného než potřebuju. Pokud bych měl tlačítko BackToTop úplně nahoře, tak offset je super. Ale co když ho mám na obrazovce dole (což je běžné). Jak zjistím pozici divu nebo section ve chvíli, kdy pod tímhle tlačítkem roluje?
|
||
| RastyAmateur Profil |
Moc nechápu. Pokud dodáš živou ukázku, tak se na to zítra podívám.
Vyzkoušej někde odečíst pozici toho BackToTop tlacitka. Sice to asi nebude ono, ale nápad to nebude marný. Vážně moc nechápu na co se ptáš, ale mohlo by to být ono... |
||
| T-fon Profil |
#7 · Zasláno: 7. 2. 2016, 21:12:54
Živá ukázka
Barva tlačítka by se měla přepnout v okamžiku, kdy se pod ním objeví nový div, ne když se nový div objeví nahoře. Chápeš to správně, asi bude potřeba odečíst pozici toho tlačítka. Ale trápí mě ještě jedna věc: když roluju nahoru, barva tlačítka se nemění, a když znova dolů, už taky ne, zůstane ta poslední. Víš jak tohle vyřešit? |
||
| RastyAmateur Profil |
#8 · Zasláno: 7. 2. 2016, 21:21:37
T-fon:
Na ukázku se mrknu zítra, až budu na pc. Co se týče toho dotazu - zkus elseif nahradir pouze if a pro to poslední else vytvoř samostatnou podmínku |
||
| T-fon Profil |
#9 · Zasláno: 7. 2. 2016, 21:35:24
Díky, třeba si tam všimneš nějaký kraviny.
Elseif jsem nahradil if - nic se nezměnilo. To poslední else jsem už vyhodil, protože to tlačítko tam mám od začátku do konce, takže je asi zbytečný. |
||
| RastyAmateur Profil |
T-fon:
Koukám na to, a nemohu a nemohu na to přijít. Pokusím se na to podívat ještě večer. Ale je to opravdu oříšek. Chtělo by to někoho zkušenějšího... :-( |
||
| Chamurappi Profil |
#11 · Zasláno: 8. 2. 2016, 12:51:38
Reaguji na T-fona:
„třeba si tam všimneš nějaký kraviny“ Třídy jen přidáváš, nikdy neodebíráš… Jinak mně přijde jako kravina celé to tlačítko. Běžní uživatelé ho skoro vůbec nepoužívají a změna jeho viditelnosti (či barvy) na něj zbytečně poutá pozornost. Už jsi někdy viděl, že by návštěvník na běžné stránce nedokázal vyrolovat nahoru? Na této diskusi si už nechaly web hodnotit desítky tisíc lidí a nevzpomínám si, že by zde někdy padla výtka typu „nechce se mi rolovat, přidej tlačítko na vyrolování, raději si kliknu“. Kdybych tohle měl tvořit já, zvažoval bych variantu, že by byla šipka jako obrázek na pozadí s background-attachment: fixed. Každý blok by měl svoji. Nebyl by vůbec potřeba JS. Ale možná by to nedopadlo dobře… nevím. Spíš bych se soustředil na rozmluvení celého tohoto nápadu.
|
||
| RastyAmateur Profil |
#12 · Zasláno: 8. 2. 2016, 17:26:40
T-fon:
S funkcí scrollTop() pracuji poprvé, takže nevím, kde je chyba, ale určitě je chyba v ní! Zkoušel jsem to zde, a je zajímavé, že když vyscroluješ dolu a hned zase nahoru, čítá to hodnoty 600. To by mohlo být to, proč to nahoru nefunguje. Jinak to, proč to nefunguje v případě, že to dáš nahoru a pak zase dolu ti zodpověděl Chamurappi, neodstraňují se třídy (asi). Tento script by dle mého názoru měl být správně, jen ta funkce scrollTop() pracuje nějak divně. Bohužel, již si opravdu nevím rady. Na rozdíl od Chamurappiho ti to v žádném případě nechci rozmlouvat. Fixní backToTop tlačítko se vždy hodí. Není nutné, ale neztratí se. Ovšem souhlasím s ním v tom, že aby měnilo barvu a upoutávalo tak pozornost uživatele, je dle (nejen) mého názoru zbytečné. Chamurappi: Pokud to chápu správně, tak bys dolu doprava do každého divu dal tlačítko backToTop...? Nemyslím si, že by to vypadalo dobře... |
||
| lionel messi Profil |
#13 · Zasláno: 8. 2. 2016, 18:44:47
RastyAmateur:
„Fixní backToTop tlačítko se vždy hodí. Není nutné, ale neztratí se.“ Klávesa Home sa hodí ešte viac. Vo všeobecnosti fixne pribité prvky veľmi nemusím, ale podľa môjho názoru má väčší zmysel fixovať menu (pre dotykové zariadenia — tých je dosť — či laikov, ktorí o Home nemajú ani poňatia, netuším, koľko ich je) než backToTop tlačidlo. Nehovoriac o tom, že som videl viacero stránok s kultivovane priklincovanou navigáciou, ktorá pri prehliadaní vôbec nerušila. O backToTop tlačidle to neplatí, vždy tak trochu prekážalo a zaberalo často až príliš veľa miesta, jeho pridaná hodnota oproti fixnému menu je z môjho pohľadu minimálna. T-fon: Ak chceš meniť farbu tlačidla, urob tak len na hover efekte (ako to má napr. livesport.cz, prejdi si jednotlivé športy). Navyše na žltom pozadí takmer nevidno šípku… |
||
| T-fon Profil |
#14 · Zasláno: 8. 2. 2016, 18:56:40
Tu barvu chci měnit kvůli tomu, že různé sekce na stránkách budou mít jinou barvu a tlačítko by nebylo vidět (na rozdíl od livesportu).
Já ještě vyzkoušim to odstranění tříd, ale pokud ta funkce načítá špatnou hodnotu, tak to stejně asi bude k ničemu. Každopádně děkuji všem za rady, možná to tlačítko ještě přehodnotíme :). |
||
| Chamurappi Profil |
#15 · Zasláno: 8. 2. 2016, 19:06:30
Reaguji na RastyAmateura:
„Fixní backToTop tlačítko se vždy hodí. Není nutné, ale neztratí se.“ Máš na to nějaká data? Měřils na skutečných lidech, že ho opravdu používají? Ty sám na něj někdy klikáš? Když brouzdám já a někde na mě při odrolování o pár pixelů vykoukne takováto šipka, tak si jí hned všimnu a řeknu si „ahá, to je jen šipka, to teď fakt nepotřebuju“ … a na většině webů ji nepotřebuji nikdy, protože jsou stránky rozumně krátké. Ale i když se dostanu na hodně dlouhou stránku a chci vyjet rychle nahoru, tak mě v tu chvíli nenapadne po ní koukat. Jednak je klávesa Home (nebo klik do prázdna prostředním tlačítkem + pohyb myší nahoru) rychlejší, jednak je univerzální (= funguje na všech webech stejně, nemusím se to učit pro každý zvlášť), jednak je jistější (ruční přerolování nevytvoří záznam v prohlížečové historii), jednak si ta šipka už svých pár decisekund pozornosti užila a teď už je součástí nezajímavého stabilního okolí. „tak bys dolu doprava do každého divu dal tlačítko backToTop...?“ Ne. Tlačítko by bylo jedno, průsvitné při ne hoveru. Na pozadí každého <div>u by byl obrázek tlačítka nabarvený na požadovanou barvu.
Třeba nějak takhle. Nechtělo se mi vyrábět obrázky, nastrkal jsem tam SVG přes data:URI, jen barevná kolečka bez šipek. Neříkám, že je to dobrý nápad… je to jen nápad :-) |
||
| RastyAmateur Profil |
#16 · Zasláno: 8. 2. 2016, 19:44:59
Chamurappi:
Já to tlačítko většinou používám. Ne na všech stránkách, ale ano. Jinak tvé řešení se mi líbí, až na jeden detail... 
|
||
| Chamurappi Profil |
#17 · Zasláno: 9. 2. 2016, 15:25:22
Reaguji na RastyAmateura:
„Jinak tvé řešení se mi líbí, až na jeden detail...“ Černou jsem tam dal úmyslně, aby bylo zřejmé, že i mimo blok může mít kolečko jiný vzhled. Asi to tedy moc zřejmé není, měl jsem použít jinou barvičku. Při mém postupu jde také zaoblit rohy. Zkoušel jsem bloky i víc zdeformovat CSS vlastností transform, ale u té není moc dobře definováno, jak má spolupracovat s fixním background-attachmentem.
|
||
| RastyAmateur Profil |
#18 · Zasláno: 9. 2. 2016, 18:05:17
Chamurappi:
Teď to vypadá opravdu hezky (myšleno to tlačítko). Ovšem musím uznat, že je to složité. Asi by to nebylo nejlepší řešení, ovšem také bych to řešil přes JS (pokud bych to řešil...). |
||
|
Časová prodleva: 8 let
|
|||
0