| Autor | Zpráva | ||
|---|---|---|---|
| Martin Joneš Profil |
Dobrý den, snažím se vytvořit v jquery něco na způsob affix pluginu v bootstrapu. Udělal jsem to tak, že divu přidám position:fixed v CSS. Tímto se ale objekt vyjme z dokumentu a vytvoří prázné místo, načež hlavní obsah stránky se přitiskne k divu nad ním. Tím se vytvoří nepříjemné škubnutí, proto potřebuju získat hodnotu padding.
const main = parseInt($('#main').css('padding')); zkoušel jsem to psát s const a i var ale obojí fungují stejně. Při načtení stránky zobrazí správnou hodnotu. Protože mám ale if podmínku při scrolování stránky, executuje se následující kód $('#main').css('padding-top', sum + 'px');, kde sum jsem definoval jako součet výsky menu a padding main. Ten zmení hodnotu padding-top pro main a jeho hodnota je opět získána prvním zmiňovaným kódem. Takže se vytvoří takový loop, díky kterému paddíng roste víc a víc, kdy dosahuje hodnot i několik tisíců pixelů. Je způsob, jak získat a uložit první hodnotu padding u divu s id "main", aby se neměnila a byla možná použít v scriptu?Pro zvídavé, tohle je můj kód. Console.log tam mám jen abych mohl v konzoli prohlížeče sledovat, jak nechutně ty čísla roustou. :D $(document).ready(function() {
$(window).scroll(function () {
var slideShow = $('#slideshow').height();
var nav = $('#navigation').height();
const main = parseInt($('#main').css('padding'));
var sum = (main + nav);
console.log(nav);
console.log(main);
console.log(sum);
if ($(window).scrollTop() > slideShow) {
$('#navigation').addClass('navbar-fixed');
$('#main').css('padding-top', sum + 'px');
}
if ($(window).scrollTop() < slideShow) {
$('#navigation').removeClass('navbar-fixed');
$('#main').css('padding-top', main + 'px');
}
});
}); |
||
| Tomášeek Profil |
Martin Joneš:
Vyhoď ji před 3. řádek, pak bude neměnná. Jinak než tohle dopočítávání se to často dělá pomocí výplňkového elementu o výšce fixovaného bloku, který je skrytý a v momentě fixování se zviditelní. Nemusíš nic dopočítávat a nebude se nic škubat. Nástřel by vypadal asi nějak takto (nezkoušel jsem sem, pokud jsem se někde přepsal, myšlenka je snad jasná): <div id=navigation>...</div> <div id=navigationfiller></div> #navigation, #navigationfiller {width: 100%; height: 50px;} /* width: 100% je tu jen kvuli position: fixed pro #navigation o 2 radky nize */
#navigationfiller {display: none;} /* skryty */
#navigation.navbar-fixed {position: fixed; left: 0; top: 0;} /* zafixovani navigace */
#navigation.navbar-fixed + #navigationfiller {display: block;} /* nyni zobrazme na miste puvodni navigace */ |
||
| Martin Joneš Profil |
#3 · Zasláno: 12. 7. 2017, 06:36:55
Tomášeek:
Díky moc za radu. Taky jsem jako první přemýšlel nad tím, že bych to udělal podle toho skrytého elementu, jenže mi přijde, že tím dopočítáváním napíšu méně kódu a že je to "snazší". Vyzkouším oba způsoby. Kdyby byl problém, tak se ozvu. Přeji krásný den. |
||
| Tomášeek Profil |
#4 · Zasláno: 12. 7. 2017, 08:41:52
Martin Joneš:
No, jestli ti moje 3 řádky kódu (1 v HTML a 2 dodané do CSS, zbytek uvedený v CSS části je to, co tam stejně v nějaké modifikaci máš) přijdou delší než to, co máš, nefunguje ti to a ani nevíš proč, tak prosím. Hlavně si vybrat snažší řešení, já to napsal během minuty z hlavy, kolik času jsi tím snažším řešením strávil zatím ty? :-) |
||
| Kcko Profil |
Martin Joneš:
Nemusíš nic dopočítavat. Stačí když v JS zmeříš výšku prvku který má být fixní, pod něj / nad něj vložíš prázdný div se stejnou výšku a nezobrazíš ho a jakmile se má první prvek zafixovat tak tuhle atrapu zobrazíš, tím ti nic neposkočí a je to univerzální v tom smyslu, že nemusíš znát výšku prvku, který chceš fixovat (výška může být variabilní, což je mnohdy potřeba). Je to řešení na 2 řádky v JS ;) Tohle je celé řešení i s fixováním var kvizTimer = $('#kviz-timer');
if (kvizTimer.length)
{
var win = $(window);
var kvizTimerOffset = kvizTimer.offset();
kvizTimer.wrap('<div class="kviz-timer-placeholder"></div>');
$(".kviz-timer-placeholder").height(kvizTimer.outerHeight());
win.on('scroll', function(){
if (win.scrollTop() > kvizTimerOffset.top)
{
kvizTimer.addClass('kviz-timer-fixed');
}
else
{
kvizTimer.removeClass('kviz-timer-fixed');
}
});
}A v css (což do JS můžeš přenést) mám akorát řádek aby se mi atrapa zobrazila pokud fixovaný prvek má třídu -fixed. |
||
|
Časová prodleva: 7 let
|
|||
0