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
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
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.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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